Layout: How to display 'list' layout?

Hello everyone,

I have a problem with layouting in Vaadin. It should be easy to solve, but I just can’t find the right combination of layout managers.

So, basically I have a list of HorizontalLayouts. Each of those contains a label, an image and a standard Button. I want to display those in a “list view”, a vertical layout. The horizontal layouts (let’s call them ‘entries’ for simplicity) should always be top-aligned and of fixed height (just as one would expect of a list view). So, if there are two entries but there would be enough vertical screen space for 5, I want the existing two to be aligned at the top, leaving the rest of the space empty (currently, they are distributed equally on the available space, which is not what I want). The list of entries is not fixed at compile time, entries get added and removed on the fly. So when there are too many entries to display at the same time, a vertical scroll bar should appear on the outer vertical layout.

Basically that’s a simple task, but in spite of my prior experience with vaadin, I just can’t seem to get it right…! I had intersecting components and the wildest constructions, but I never arrived at my goal.

Any hints?



EDIT: Here’s an image explaining what I’m trying to accomplish:

For scrollbars, you need a Panel. Set its size to defined (for example, width: 300px, height: 400px, or whatever values suite you). As the panel’s content, set a CssLayout, width 100%, height undefined. Add your HorizontalLayouts (with the image, label and button) inside the CssLayout.


thank you for your answer :slight_smile:

So, a CSS Layout then? I’ve never used it before, I rather stay as far away from CSS in general as possible. But it sounds reasonably simple - I will definitly give it a try!

Thanks a lot!


You don’t necessarily have to use a CssLayout, you can use a VerticalLayout instead, if you so wish. I suggested a CssLayout because it’s a bit more lightweigth than VerticalLayout and from a layouting perspective, there’s nothing special in the VerticalLayout that you need. You can also use a CssLayout without knowning any css.

Yeah, the naming of CssLayout is really misleading, and I would prefer if we renamed it in the next major version to something less specific. Plain “Layout” might even work, and make it a bit more generic/flexible that it could be the thing you could extend easily if you ever wanted to create your own layout type.

Hello everyone,
I just wanted to report that I gave the proposal from the first answer a try today and it worked like a charm! Thanks a lot, I will remember the CSS Layout in the future.

It’s not the CssLayout that did the trick, but the combination of Panel (which gave you the scrollbars) and then a container layout, in this case, CssLayout. As mentioned previously, you will get exactly the same result if you swap CssLayout for a VerticalLayout.