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;
  }
  
}

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Sidebar creation

Important Notice - Forums is archived

Vaadin lets you build secure, UX-first PWAs entirely in Java.Free ebook & tutorial.

Sidebar creation

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.