TabSheet with padded tabbar inside Panel. Unwanted scrollbar.

Vaadin 6 / 7 / 8
1

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

2

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

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? :slight_smile:

4

Probably not. :wink:

I’ll take a look and see if there’s any quickfixes available.

5

Actually, for me it’s the opposite. The scrollbar is only visible when TABSHEET_FRAMED is used.

6

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