Scrollbar in tabsheet

Vaadin 6 / 7 / 8 Framework UI
1

Hello,

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

2

Hi,

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.

3

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…

4

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

.v-customcomponent{
    overflow: scroll;
}

it seems to work, but all components have scrollbars.

5

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

6

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.

7

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