Double scrollbars

Flow
1

This simple layout with a toolbar and a tabsheet gives me double scrollbars if the content of the tabsheet is large enough.

image
image918×551 18.4 KB

@Route(value="/testDoubleScrollbars")
public class TestDoubleScrollbars extends VerticalLayout {

    public TestDoubleScrollbars() {

        setSizeFull();

        // Toolbar

        HorizontalLayout toolbar = new HorizontalLayout(new H1("Toolbar"));
        toolbar.setWidthFull();
        add(toolbar);

        // Tabsheet

        TabSheet tabSheet = new TabSheet();
        tabSheet.setSizeFull();
        add(tabSheet);

        // 1st tab

        Icon image = VaadinIcon.COG.create();
        image.setSize("512px");

        tabSheet.add("Tab 1", image);

    }

}

Any suggestions on how to get around this?

I notice that if I replace the TabSheet and tab with just a Scroller, then the problem goes away, so maybe the issue is TabSheet as such?

        Icon image = VaadinIcon.COG.create();
        image.setSize("512px");
        Scroller scroller = new Scroller(image);
        scroller.setSizeFull();
        add(scroller);

This is with Vaadin 24.5.1 btw

2

If I’m not mistaken, you shouldn’t set the height of the tabsheet/scroller as 100%, but rather set flex-grow: 1 on it.

3

I see I asked the same question before the forum moved back to Vaadin: TabSheet moves depending on content, and tall tab-content causes double vertical scrollbars

( The problem came back because we did a restructuring of the outer layout )

Based on that, I can get rid of the outer scrollbars by seting overflow:hidden on the VerticalLayout.

Next, I’ll try to find the right place to set it in my actual application

4

I think I have a solution now; Look at my reply to myself, but I tried your suggestion.I got only one scrollbar, but the wrong one:

image
image909×455 16.3 KB

5

Good old flex item default min-height issue: the min-height of the VerticalLayout (a flexbox column) is expanded past 100% of the page body by the tabsheet’s contents.

I’ve spent several hours just this week trying to come up with a tweak to HL and VL that would avoid this issue without breaking thousands of existing applications. Not sure if I’ll find one yet.

6

I’m happy that we have HorizontalLayout/VerticalLayout to ease the migration of our app, but I have wondered if they are part of the problem. Would any of this become easier if we replaced them with Span and Div?

7

Span and Div are not layouts. You can put stuff in them but you’ll still need something to define how those things should be laid out in them.

For all practical purposes, flexbox is the way to layout stuff in divs (or any html element). The issue you’re facing is a “feature” of flexbox, and you’re experiencing it with HL and VL because they are (from V10 onwards) really just flexboxes with fancy names (and Java APIs).