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!