Stacking tab on a tabsheet

Hello Experts,

Currently I have a 1X4 tabsheet that looks something like this:

Tab 1 | Tab 2 | Tab 3 | Tab 4

Now, I would like to make it a 2x2 stacking tabsheet that looks something like this:

Tab 1 | Tab 2
Tab 3 | Tab 4

My current code looks like the below. What do i need to change to make the new layout possible? Thanks for your advice in advance!


TabSheet tabsheet = new TabSheet();
VerticalLayout tab1 = new VerticalLayout();
VerticalLayout tab2 = new VerticalLayout();
VerticalLayout tab3 = new VerticalLayout();
VerticalLayout tab4 = new VerticalLayout();
tab1.addComponent(tree);
tab2.addComponent(tree1);
tabsheet.addTab(tab1, "Reporting",null);
tabsheet.addTab(tab2, "Validate",null);
tabsheet.addTab(tab3, "Config",null);
tabsheet.addTab(tab4, "Alerts",null);

As far as I know, you cannot split the tabs on multiple rows. What you can do, is to have a tabsheet inside of another tabsheet, in other words, just replace the VerticalLayout of tab1 with another TabSheet and add tab3 and tab4 to the tabsheet in tab1. The downside with this is, that you will have the second row tabsheet only when Tab1 is selected. If you select tab2, then you won’t see the second row. Another problem is, that you cannot add a component to two layouts, in other words, you cannot have one TabSheet instance which you would put in both Tab1 and Tab2. This also means that you need to have one tab selected in both tabsheets, so by default you’d actually have tab1 and tab3 simultaneously selected.

The explanation might be quite confusing, but try it out and you’ll see what I mean :slight_smile: