how can i indepenendtly scroll in vaadin dialog

Question

Given this code:

public class TESTDIALOG extends Dialog {
    public TESTDIALOG() {
        Div left = new Div();
        Div right = new Div();

        left.setHeight("5000px");
        right.setHeight("200px");
        left.getStyle().setBackgroundColor("red");
        right.getStyle().setBackgroundColor("blue");


        var leftWrapper = new Scroller(left);
        var rightWrapper = new Scroller(right);
        leftWrapper.setWidth("50%");
        rightWrapper.setWidth("50%");
        add(new HorizontalLayout(leftWrapper, rightWrapper));
        setWidth("1000px");
    }
}

i expect to be able to scroll both containers independently. but in fact i can just scroll them together.

how can i make "red" to be scrolled without scrolling the whole "content" of the dialog?

Answer 1

I believe the missing piece is to set a fixed height on the Scroller. for example:

leftWrapper.setHeight("500px"); // or maybe better "100%" ? up to you..

Otherwise the Scroller component will just be as high as its content wants it to be, hence no scrollbar as all the content within has enough space.

Maybe the dialog itself also needs to have a height defined, I'm not sure if it does that out of the box