Scrollbar in tabsheet


I have a tabsheet inside a verticallayout (aligned middle) and I fill tabs with customcomponent,
Every customcomponent has a CustomLayout.

I would have the tab filling the entire space (its expand ratio is 1) and the component inside with vertical scrollbar when the content exceeds the height.

I tried to setSizeFull in every component, with no results.

How can I do?
Thank you


The content component of the tab must have an undefined height in order for the scrollbar to appear. If you set all the components inside the tab to 100% height, they will never exceed the available space in the tab.

Hi Jouni,

I have a class that extends CustomComponent.
In my BuildMainLayout() function I create my CustomLayout, then I call setSizeUndefined() on the component (not the layout), but scrollbars does not appear…

I found this rule:

.v-customcomponent {
    overflow: hidden;

in legacy_style.css.

So the component overflow is never shown.
I think that legacy_style.css needs a rule like:

.v-tabsheet-content .v-customcomponent{
    overflow: scroll;

but it doesn’t work. Scrollbars appear but are not enabled.

If I use

    overflow: scroll;

it seems to work, but all components have scrollbars.

It does not the trick, I still have the problem…

The CustomComponent isn’t the one that should provide the scrollbar. The Tabsheet should provide the scrolling.

So the overflow: hidden in the theme for .v-customcomponent shouldn’t be the problem. Just make sure your tabs have a defined height, and that the custom component inside the tab is undefined height.

It would help if I could see the actual Java code, maybe I could spot the problem there.

So I have to give a fixed height… Ok. Thank you Jouni.