Need same size for every tab in a TabSheet

I have a tab sheet with 2 tabs. Every tab has his own height, which isn’t specified. It just takes the height it needs.
Now with changing the tab, the height of the TabSheet change to fit the content of the selected tab.
Problem is, that the height of the TabSheet shouldn’t change. Also I cannot set a fix height for the TabSheet. It should have the height which needs the highest content in a containing tab.

Example:

TabSheet tabsheet = new TabSheet();
VerticalLayout tab1 = new VerticalLayout ();
VerticalLayout tab2 = new VerticalLayout ();

tab1.addComponent(new Label(“test”));

tab2.addComponent(new Label(“test”));
tab2.addComponent(new Label(“test”));
tab2.addComponent(new Label(“test”));

tabsheet .addTab(tab1);
tabsheet .addTab(tab2);

→ Actually the TabSheet has the height to fit with the content in tab1. But it should already have the height to fit with the content in tab2, too.

Hi,

As far as I know, that’s not supported in TabSheet currently, and there’s no sensible way to do that.

If you want to go insensible, there is a trick… You could have in both tabs a duplicate HorizontalLayout that has the exactly same logical content: the two VerticalLayouts with all the same content in both. Then, make one of the VerticalLayouts have 0 width in CSS (some additional trickery may be needed with that). They will still have their height, which causes the HL have the height of the highest VL, which is same in both tab HLs.

I have it. I’ll post my solution later

Ok, good. I too tried it quickly and made
this small example
.

I solved my problem without a TabSheet. The problem was just to get the correct height, although there are layouts available which are currently not shown (like in a TabSheet all the tabs which aren’t selected).

So my solution was something like this:

Panel mainPanel = new Panel();
HorizontalLayout mainLayout = new HorizontalLayout();
VerticalLayout view = new VerticalLayout();
VerticalLayout info = new VerticalLayout();

view.addComponent(new Button(“Open info”));
view.setWidth(“100px”); //The full size which is visible in the UI

info.addComponent(new Label(“test”));
info.addComponent(new Label(“test”));
info.addComponent(new Button(“Close info”));
info.setWidth(“100px”); //The full size which is visible in the UI

mainLayout.addComponent(view);
mainLayout.addComponent(info);

mainPanel.setContent(mainLayout);
mainPanel.setWidth(“100px”);
mainPanel.addStyleName(“hidden”);//To remove the scrollbar, which occurs because of the 2 views


For the button to open the info, there is a click listener doing something like this:
mainLayout.addComponentAsFirst(info);

For the button to close the info, there is a click listener doing something like this:
mainLayout.addComponentAsFirst(view);


mytheme.scss:

.hidden .v-panel-content
{
overflow: hidden;
}