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.
TabSheet with padded tabbar inside Panel. Unwanted scrollbar.
Hi,
In my code I try to insert full sized TabSheet component into a scrollable component (Panel for example).
Unfortunately, if I add ValoTheme.TABSHEET_PADDED_TABBAR style to my tabsheet, it causes undesirable scrollbar.
@Theme(ValoTheme.THEME_NAME)
public class MyVaadinUI extends UI {
@Override
protected void init( VaadinRequest request ) {
final VerticalLayout content = new VerticalLayout();
content.setMargin( true );
content.setDefaultComponentAlignment( Alignment.TOP_CENTER );
final TabSheet tabSheet = new TabSheet();
tabSheet.addTab( new Label(), "Tab-1" );
tabSheet.addTab( new Label(), "Tab-2" );
tabSheet.addStyleName( ValoTheme.TABSHEET_PADDED_TABBAR );
tabSheet.addStyleName( ValoTheme.TABSHEET_FRAMED );
tabSheet.setSizeFull();
final Panel panel = new Panel( tabSheet );
panel.setWidth( "400px" );
panel.setHeight( "300px" );
panel.setCaption( "Scrollable component" );
content.addComponent( panel );
setContent( content );
}
@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class)
public static class Servlet extends VaadinServlet {
}
}
Thanks,
Dmitry
This looks like a bug in the Valo-Theme to me, you should file a bug-report in the tracker.
To work around the problem wrap the Tabsheet in another layout:
VerticalLayout content2 = new VerticalLayout(tabSheet);
content2.setSizeFull();
final Panel panel = new Panel( content2 );
I found 3 similar tickets:
https://dev.vaadin.com/ticket/15180
https://dev.vaadin.com/ticket/16380
https://dev.vaadin.com/ticket/16517
Should I to register another one? :)
Dmitry Smirnov: I found 3 similar tickets:
https://dev.vaadin.com/ticket/15180
https://dev.vaadin.com/ticket/16380
https://dev.vaadin.com/ticket/16517Should I to register another one? :)
Probably not. ;)
I'll take a look and see if there's any quickfixes available.
Actually, for me it's the opposite. The scrollbar is only visible when TABSHEET_FRAMED is used.
You could do something like this as a quickfix; I haven't tested it very much. my-tabsheet is a 3rd style I added, in addition to TABSHEET_PADDED_TABBAR and TABSHEET_FRAMED.
.v-tabsheet.my-tabsheet {
.v-tabsheet-content {
$tmp: $v-unit-size + round($v-unit-size/6) + (3 * first-number($v-border));
height: calc(100% - $tmp) !important;
}
.v-tabsheet-tabsheetpanel {
height: 100% !important;
.v-scrollable {
height: 100% !important;
}
}
}