Scrollable Layout in Vaadin Flow

Question

In Vaadin Flow, there exists no Component that is essentially a Scrollable Layout. In Vaadin 8, this was done by the Panel.

Is there a way to achieve a scrollable Component in Vaadin Flow?

Answer 1

Edit: I have now published an add-on here that provides the class VerticalScrollLayout, and also the class HorizontalScrollLayout. If there are suggestions for improvements, feel free to contact me or comment here.

---

Yes it is possible, although there is no existing Component that does it automatically.
The way to go is placing a VerticalLayout (for a vertical scroll bar) inside another component, and setting the display property of that VerticalLayout from flex to block. (credits to Diego Sanz Villafruela in the vaadin forum)

I have made my own VerticalScrollLayout class that does it all for you, so that using it in a view is as easy as using a simple VerticalLayout

public class VerticalScrollLayout extends VerticalLayout {
    private VerticalLayout content;

    public VerticalScrollLayout(){
        preparePanel();
    }

    public VerticalScrollLayout(Component... children){
        preparePanel();
        this.add(children);
    }

    private void preparePanel() {
        setWidth("100%");
        setHeight("100%");
        getStyle().set("overflow", "auto");

        content = new VerticalLayout();
        content.getStyle().set("display", "block");
        content.setWidth("100%");
        content.setPadding(false);
        super.add(content);
    }

    public VerticalLayout getContent(){
        return content;
    }

    @Override
    public void add(Component... components){
        content.add(components);
    }

    @Override
    public void remove(Component... components){
        content.remove(components);
    }

    @Override
    public void removeAll(){
        content.removeAll();
    }

    @Override
    public void addComponentAsFirst(Component component) {
        content.addComponentAtIndex(0, component);
    }
}

Answer 2

There is now an official component for scrolling:

https://vaadin.com/docs/latest/components/scroller