I have a page with a TabSheet on it, and I want it to size vertically to fill the available space.
Using setFlexGrow() on the TabSheet container made the TabSheet itself size properly, but I can’t seem to get the individual tabs to also size to match. I’ve tried calling setSizeFull() on each tab’s container component and also setting “flex-grow: 1”, neither of which seems to help.
Is there a way to make the tab sheet content size to 100% of the height of the TabSheet content area?
setSizeFull should work. Here is an example of a vertical layout with a tab sheet where both the sheet and tab contents take up the remaining height:
public class TabSheetView extends VerticalLayout {
public TabSheetView() {
setSizeFull();
add(new H1("TabSheet vertical sizing test"));
TabSheet tabSheet = new TabSheet();
add(tabSheet);
setFlexGrow(1, tabSheet);
setAlignSelf(Alignment.STRETCH, tabSheet);
Div content = new Div();
content.getStyle().set("background-color", "#f5f5f5");
content.getStyle().set("border-radius", "4px");
content.setSizeFull();
tabSheet.add("Tab", content);
}
}
The root cause ended up being CSS related.
The outermost container component (a VerticalLayout) had a min-height of 100vh, but no height. When I added setHeightFull() to that component then everything magically starting working as expected.
