Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Sidebar creation
I'm attempting to replicate something close to the QuickTickets demo. I'm starting with creating the sidebar. I figured that a HorizontalSplitPanel would be necessary here, but it doesn't seem to go the entire height of the browser window. It only seems to go as far as the content allows, including margins and spacing:
And the strange part of it is that I've set both the HorizontalSplitPanel and the VerticalLayout that is in both of its panels all to setSizeFull(). So what gives?
EDIT: Here's some code to help clarify how I have things right now:
Label text = new Label();
Button logout = new Button("Logout", new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
// TODO Auto-generated method stub
// "Logout" the user
getSession().setAttribute("user", null);
// Refresh this view, should redirect to login view
getUI().getNavigator().navigateTo(NAME);
}
});
HorizontalSplitPanel splitPanel;
public MainView() {
// Set up each panel of the split panel.
VerticalLayout sideBar = new VerticalLayout();
sideBar.setSizeFull();
sideBar.setMargin(true);
sideBar.setSpacing(true);
sideBar.addComponent(logout);
VerticalLayout mainPanel = new VerticalLayout();
mainPanel.setMargin(true);
mainPanel.setSpacing(true);
mainPanel.addComponent(text);
// The components that make up this main view.
splitPanel = new HorizontalSplitPanel(sideBar, mainPanel);
splitPanel.setSizeFull();
splitPanel.setSplitPosition(200, Unit.PIXELS);
splitPanel.setLocked(true);
// Use a custom style to paint the left side's background.
splitPanel.addStyleName("mainsplitter");
setCompositionRoot(splitPanel);
}
@Override
public void enter(ViewChangeEvent event) {
// This method is fired when the view changes to this main screen.
// Get the user name from the session
String username = String.valueOf(getSession().getAttribute("user"));
// And show the username
text.setValue("Hello " + username);
}
And the SCSS I added:
@import "../valo/valo.scss";
@mixin vaadintreetabletest {
@include valo;
// Insert your own theme rules here
.v-checkbox > input:indeterminate ~ label:after {
color: $v-selection-color;
content: "\f068";
}
/* Disable both divider and drag handle */
.v-splitpanel-hsplitter-mainsplitter,
.v-splitpanel-hsplitter-mainsplitter div {
width: 0px;
}
/* Style the left container */
.mainsplitter .v-splitpanel-first-container {
background: #464c57;
}
}
Solved the problem!
Everything can be set as setSizeFull(), but they'll only be as big as the outermost component's smallest possible size for its content. Even if that outermost component is set to setSizeFull(), as well. What I didn't realize (and what I didn't put in my post, because I didn't think it mattered) is that all of this takes place within a View. After logging in via the first View, the Navigator changes to this main view with the HorizontalSplitPanel.
So, adding just a very simple setSizeFull() in the view solves the problem!