Further help with scrolling - possible bug in platform or sanity check needed

Flow
1

Sorry devs but I’m really pulling my hair out with this one and it’s a bit of a show stopper. I just cannot get scrolling to work properly with the following 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:

Screenshot 2024-09-10 at 12.20.10
Screenshot 2024-09-10 at 12.20.101646×1244 124 KB

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 inputs 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 big time with Vaadin.

2

Answered my own question again lol :grinning:

See https://stackoverflow.com/questions/78969307/vaadin-24-scrolling-possible-bug-in-platform-or-sanity-check-needed/78969789

Not a very intuitive solution however.

3

For the record, if setting a fixed size somewhere fixes a layouting issue, that indicates that you’re trying to apply a relative size (such as 100% width/height) where there is an undefined-sized parent somewhere up the element hierarchy. Because 100% of undefined is still undefined, you’re bound to get unexpected results.

4

Thanks for the reply Olli and I appreciate the comment, but this is where I’m puzzled…

My code snippet above is fully self contained within the context of the Dialog component. Please could you explain where one of my parents has an undefined size as there is no other code that comes into play.

The hierarchy is:

The Dialog has a fixed height of 600px
    VerticalLayout "content" is 100%
        TabSheet "tabSheet" is 100%
            VerticalLayout "previewLayout" is 100%
                VerticalLayout "phaseLayout" is UNDEFINED
                VerticalLayout "instructionLayout" is 100%
                    Scroller "scroller" is 100%
                        VerticalLayout "scrollLayout" is 100%

It’s the “phaseLayout” that seems to cause the problem (it is undefined) but this is not a parent of the rest of the hierarchy starting at “instructionLayout”.

I know the layout seems unnecessarily complex but this is a simulation of a more complex layout where the different levels in the hierarchy are dynamically invoked and populated as required.

I’m not trying to criticise but I’d like to get to the bottom of this if possible.

5

I believe the root of the issue is that undefined size means that an element’s height or width is defined by the element’s contents. So while previewLayout’s height is 100% of tabSheet (plus or minus margins), phaseLayout’s height is “however much my child elements require”. This is assuming display: block.

One thing that may complicate things further is if you have CSS FlexBox in use, where the flex-grow property determines how available empty space is divided between child elements, but I don’t know if that comes into play here.

6

Okay I get that. So an element whose height is “however much my child elements require” will affect its sibling even though that sibling and its parents and children all have a defined height?

If that is the case then I see no other solution other than the one I posted!