Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Unwanted scrolling when applying border to v-tabsheet-tabcontainer
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