TabSheet with padded tabbar inside Panel. Unwanted scrollbar.


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.

public class MyVaadinUI extends UI {

    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 );
        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 {


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);
final Panel panel = new Panel( content2 );

I found 3 similar tickets:

Should I to register another one? :slight_smile:

Probably not. :wink:

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


; 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-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;