I successfully established my web page layout with Vaadin - navigation on the left side, and details on the right side. I gave them a proportion using a HorizontalLayout.setExpandRation(). This looked fine, behaved as expected, and the page used all available space down to the browser window bottom.
Then I tried to replace the HorizontalLayout by a HorizontalSplitPanel, calling setSplitPosition() instead of setExpandRatio():
final AbstractSplitPanel navigationAndDetailsLayout = new HorizontalSplitPanel();
navigationAndDetailsLayout.setSizeFull();
navigationAndDetailsLayout.setSplitPosition(15f, Unit.PERCENTAGE);
final Component navigation = new Navigation();
navigation.setSizeFull();
navigationAndDetailsLayout.setFirstComponent(navigation);
final AbstractOrderedLayout details = new Details();
details.setSizeFull();
navigationAndDetailsLayout.setSecondComponent(detailsLayout);
My page looked different now. It had a smaller height, a scrollbar on the details side to the right, and a lot of empty unused space below the SplitPanel.
I have set all nested Components to setFullSize().
When I made the navigation to the left higher, also the details to the right had more place, but there was no way to expand the SplitPanel to the bottom of the browser window.
It looks like the SplitPanel always uses the minimal height of the smaller contained component - ?
How can I expand my page to browser window bottom without giving up the SplitPanel?
Using a split panel to take up all the space shouldn’t be different from HorizontalLayout that you were using earlier. How about the code around the snippet that you posted? My guess is that you have a VerticalLayout where you put the header, top menu and split panel. Is that layout put to size full as well, and have you given the split panel an expand ratio? verticalLayout.setExpandRatio(navigationAndDetailsLayout, 1);
Hm, tried it but did not help.
From JavaDocs of setExpandRatio():
But the excess space seems to be wrong or unknown.
Here is my code.
public MainViewImpl() {
final AbstractOrderedLayout mainLayout = new VerticalLayout();
mainLayout.setSizeFull();
setCompositionRoot(mainLayout);
final Layout mainHeaderLayout = new VerticalLayout();
final MainHeaderImpl mainHeaderComponent = new MainHeaderImpl();
mainHeaderLayout.addComponent(mainHeaderComponent);
MainMenuImpl mainMenuComponent = new MainMenuImpl();
mainHeaderLayout.addComponent(mainMenuComponent);
mainLayout.addComponent(mainHeaderLayout);
mainLayout.setExpandRatio(mainHeaderLayout, 1f);
final AbstractSplitPanel navigationAndDetailsLayout = new HorizontalSplitPanel();
navigationAndDetailsLayout.setSizeFull();
navigationAndDetailsLayout.setSplitPosition(15f, Unit.PERCENTAGE);
final NavigationImpl navigationComponent = new NavigationImpl();
navigationComponent.setSizeFull();
navigationAndDetailsLayout.setFirstComponent(navigationComponent);
final AbstractOrderedLayout detailsWithHeaderLayout = new VerticalLayout();
detailsWithHeaderLayout.setSizeFull();
navigationAndDetailsLayout.setSecondComponent(detailsWithHeaderLayout);
mainLayout.addComponent(navigationAndDetailsLayout);
mainLayout.setExpandRatio(navigationAndDetailsLayout, 9f);
final DetailsHeaderImpl detailsHeaderComponent = new DetailsHeaderImpl();
detailsWithHeaderLayout.addComponent(detailsHeaderComponent);
final AbstractOrderedLayout detailsAndAsideLayout = new HorizontalLayout();
detailsAndAsideLayout.setSizeFull();
final DetailsImpl detailsComponent = new DetailsImpl();
detailsComponent.setSizeFull();
detailsAndAsideLayout.addComponent(detailsComponent);
detailsAndAsideLayout.setExpandRatio(detailsComponent, 3.0f); // cover 3/4 of width
final DetailsAsideImpl detailsAsideComponent = new DetailsAsideImpl();
detailsAndAsideLayout.addComponent(detailsAsideComponent);
detailsAndAsideLayout.setExpandRatio(detailsAsideComponent, 1.0f); // cover 1/4 of width
detailsWithHeaderLayout.addComponent(detailsAndAsideLayout);
}
