Unwanted scrolling when applying border to v-tabsheet-tabcontainer

Vaadin 6 / 7 / 8
1

Hi,

I’m using a TabSheet component in my application and am having a problem with unwanted scrolling in the contents of the tabs. I’ve created a simple example to illustrate. I’m trying to create a styling that adds a bottom border to my tabs. Whenever I do that, the height of the tab content is not being adjusted by the height og the border and thereby resulting in unwanted scrolling. Specifically the height of the v-tabsheet-content is calculated to a specific pixel height - and the border height is not subtracted from this height. Is this a Vaadin bug or is there anything i can do to avoid this unwanted scrolling? If I don’t apply the bottom border styling, there’s no scrolling.

The example has a UI that creates a TabSheet with a single CssLayout:

CssLayout outerLayout = new CssLayout();
outerLayout.setSizeFull();
TabSheet tabSheet = new TabSheet();
tabSheet.addTab(outerLayout, "Tab");
tabSheet.setSizeFull();
setContent(tabSheet);

and applies this CSS styling:

.v-tabsheet-tabcontainer {
    border-bottom: 10px solid #197de1;
}

Thanks,
Brian