ScrollLayout

Implentations of vertical and horizontal Layouts with scroll bar

EDIT: Vaadin 14 now has the Scroller component in their core, which basically makes this here obsolete. https://vaadin.com/docs/v14/ds/components/scroller
I haven't checked their implementation, but I would assume they did it better than me.. ;)

In Vaadin Flow, there is no Layout with a provided scroll bar. In Vaadin 8, you could use Panel.

Now you can use this add-on, which includes 2 classes: VerticalScrollLayout and HorizontalScrollLayout.

They can be used just the same as their nonscrollable VerticalLayout and HorizontalLayout counterparts.

Compatible with Vaadin 14 - bower AND npm mode.

Sample code

VerticalLayout mainLayout = new VerticalLayout();
mainLayout.add(new H4("VerticalScrollLayout"));

VerticalScrollLayout verticalScrollLayout = new VerticalScrollLayout();
for(int i = 0; i < 30;){
    TextField textField = new TextField("Test "+ ++i);
    textField.setWidth("100%");
    verticalScrollLayout.add(textField);
}
verticalScrollLayout.setHeight("300px");
mainLayout.add(verticalScrollLayout);

mainLayout.add(new H4("HorizontalScrollLayout"));
HorizontalScrollLayout horizontalScrollLayout = new HorizontalScrollLayout();
for(int i = 0; i < 30;){
    horizontalScrollLayout.add(new TextField("Test "+ ++i));
}
horizontalScrollLayout.setHeight("100px");
mainLayout.add(horizontalScrollLayout);

Links

• github

Compatibility