Scrollable Layout in Vaadin Flow

Viewed 1739

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?

1 Answers

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);
    }
}
Related