Vaadin 24 scrolling - possible bug in platform or sanity check needed

Question

I just cannot get scrolling to work properly with the Vaadin 24 framework.

This code:

public class Test2View extends Dialog {

    public Test2View() {

        setHeaderTitle("Test");
        setResizable(true);
        setWidth("800px");
        setHeight("600px");

        VerticalLayout content = new VerticalLayout();
        content.setPadding(false);
        content.setHeightFull();
        add(content);

        content.add(new TextField("Name"));

        TabSheet tabSheet = new TabSheet();
        tabSheet.addClassName(LumoUtility.Overflow.HIDDEN);
        tabSheet.setSizeFull();
        content.add(tabSheet);

        tabSheet.add("Instructions", createViewLayout());
    }

    private VerticalLayout createViewLayout() {

        VerticalLayout previewLayout = new VerticalLayout();
        previewLayout.addClassNames(LumoUtility.Border.ALL, LumoUtility.BorderColor.CONTRAST_20);
        previewLayout.setHeightFull();

        VerticalLayout phaseLayout = new VerticalLayout();
        phaseLayout.addClassNames(LumoUtility.Border.ALL, LumoUtility.BorderColor.CONTRAST_20);
        phaseLayout.add(new Span("Phase"));

        VerticalLayout instructionLayout = new VerticalLayout();
        instructionLayout.addClassNames(LumoUtility.Border.ALL, LumoUtility.BorderColor.CONTRAST_20);
        instructionLayout.setHeightFull();

        VerticalLayout scrollLayout = new VerticalLayout();
        scrollLayout.setHeightFull();

        Scroller scroller = new Scroller(scrollLayout, Scroller.ScrollDirection.BOTH);
        scroller.setSizeFull();
        instructionLayout.add(new Span("Inputs"), scroller);

        previewLayout.add(phaseLayout, instructionLayout);

        IntStream.range(0, 20).forEach(i -> {
            TextField textField = new TextField("Text " + i);
            scrollLayout.add(textField);
        });

        return previewLayout;
    }
}

Called using:

new Test2View().open();

Produces the following: screen shot

I’ve been on this for 3 days now and still can’t find a solution, and I’m questioning my sanity. Surely it can’t be this hard to produce what I require - just a simple vertical scroll within the input layout with no overflow and therefore no superfluous scroll bars appearing for the overflown content. Note if the “phaseLayout” is removed, then all is good. Please help as this is holding me up a big time with Vaadin.

Answer 1

Okay, thanks to posting on StackOverflow I found a related answer on this page.

It works if I add:

instructionLayout.setHeight("1px");
previewLayout.expand(instructionLayout);

Not exactly intuitive but a solution nonetheless.