How to Make a Verticallayout Scrollable Using Vaadin

How can I make a VerticalLayout scrollable using vaadin?

Try using Panel within which you can put your bodyContent(vertical layout) using setContent() and can have scroll bars when height of your layout exceeds the panel's height.

Scrollable layout in Vaadin 8

Is there a snippet of a scrollable VerticalLayout implementation?

In Vaadin 8, there is a Panel component which is basically a scrollable VerticalLayout. Have you tried this out yet?
https://vaadin.com/docs/v8/framework/layout/layout-panel.html

If the Panel doesn't work somehow for your needs and you wanted to implement your own version of a scrollable layout, then you will have to nest 2 layouts. The outer will have a fix height i.e. 100% while the inner can expand to any size it needs. then you set overflow of the outer to hidden. I made a ScrollableVerticalLayout Component for Vaadin Flow, and although you can't use it directly because it's not Vaadin 8 compatible, you can see how I did it in my github and replicate it in your project

Scrollable Layout in Vaadin Flow

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

How to add scrollbar to Vaadin layout

Your sp HorizontalLayout and your photos Panel need to be full sized.

As you can read in the Vaadin Book chapter 6.6.1

Normally, if a panel has undefined size in a direction, as it has by
default vertically, it will fit the size of the content and grow as
the content grows. However, if it has a fixed or percentual size and
its content becomes too big to fit in the content area, a scroll bar
will appear for the particular direction. Scroll bars in a Panel are
handled natively by the browser with the overflow: auto property in
CSS.

Vaadin 8 View: No horizontal scrollbar on window resizing

The problem is that you are setting the width of your mainLayout to the width of your view. This means, that your mainLayouts width will never be bigger than your views width. So no scroll bar will appear.

According to the information you posted, changing your mainLayouts width to undefined should fix the problem.

 mainLayout.setWidth("-1px");

filling available space inside a vertical layout

So if i've understood right you would like to have a first area with fixed height and a second area that could be bigger than remaining height so it needs to scroll.

If that's the case, here's the layout

• VerticalLayout"Main" (sizeFull)

  • VerticalLayout"1" (width 100%, height fixed): fill this layout with your fixed height content
  • Panel (sizeFull + setExpandRation on VerticalLayoutMain to 1)
    
    • VerticalLayout"2" (width100%, heightUndefined): fill this layout with your other content

Regards

---

Related Topics