CODEWITHSUNDEEP
vaadinvaadin-flowvaadin14vaadin23
Stephane Grenier
Stephane Grenier

Reputation: 15927

How to I get the scrollbar on the VerticalLayout rather than the HorizontalLayout in Vaadin Flow

This is using the Vaadin starter project Hello World example. In essence I want to have the scrollbar in the VerticalLayout on the left rather than on the whole page as shown in the image below:

enter image description here

However no matter what I do the scrollbar always appears on the right side. I suspect this may have to do with the AppLayout but I'm not sure how to adjust it so that the scrollbar is on the VerticalLayout shown in the diagram below.

The code is as follows:

add(getHelloVerticalLayout(), new HorizontalLayout(new Button("Simple")));

Where getHelloVerticalLayout() consists of just a bunch of Hello buttons so that it's large enough to generate a scrollbar on the webpage.

private VerticalLayout getHelloVerticalLayout() {
    List<Button> buttons = new ArrayList<>();
    for(int x=0; x<=50; x++)
        buttons.add(new Button("Hello"));
    return new VerticalLayout(buttons.toArray(Button[]::new));
}

Upvotes: 1

Views: 272

Answers (1)

Knoobie
Knoobie

Reputation: 2064

You can wrap your layout, which needs a scrollbar, with the Scroller component. See the official docs for more information and example https://vaadin.com/docs/latest/ds/components/scroller

Upvotes: 3

Related Questions