Search code examples
vaadinvaadin8

Scrollable layout in Vaadin 8


Sometimes I get it to work, other times not so much, and I can't seem to figure out the factors at play.

This is the code I'm using which works sometimes and other times it compresses the items to fit the vertical space without adding a scroll bar.

    final VerticalLayout layout = new VerticalLayout();
    setContent(layout);
    layout.setHeight("100%");
    VerticalLayout thisshouldnotscroll=new VerticalLayout(); thisshouldnotscroll.setHeight("100%");
    thisshouldnotscroll.addComponent(new Label("This should not scroll"));
    VerticalLayout thisshouldscroll=new VerticalLayout();
    thisshouldscroll.setHeight("100%");
    for (int i=0;i<200;i++){thisshouldscroll.addCompoenent(new Label("Item in list"));}
    layout.addComponents(thisshouldnotscroll,thisshouldscroll);

How do you switch from flex to block mode in Vaadin8?


Solution

  • 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