Reverse order VerticalLayout


I would like to make a chatroom component in Vaadin where I add labels to a VerticalLayout, but I’d like the messages to be posted from the bottom up.


ReverseVerticalLayout layout = new ReverseVerticalLayout()
layout.add(new Label(“message1”));
layout.add(new Label(“message2”));
layout.add(new Label(“message3”));



Thanks in advance,

just use

VerticalLayout layout = new VerticalLayout();
layout.addComponent(new Label(“message1”), 0);
​layout.addComponent(new Label(“message2”), 0);
​layout.addComponent(new Label(“message3”), 0);

I think components can be added to a certain position. So, you should store a counter of messages sent, and when a new message has to be created add it to the position of the counter, then increase it.

The biggest limitation is the reverse scrollbar, I think.

I need a Layout where I add items to the bottom (absolute bottom - so I’ll be setting the size early) and have that item focused to automatically. As I add items, the layout will automatically scroll to the bottom to display the latest/bottom-most added component, and you can scroll upwards to see older components.

AbsoluteLayouts are not even scrollable from what I’ve tried.

Put the VerticalLayout in a Panel, then after every insert call


That should scroll you to the bottom.

That sort of thing would probably be best done with Table or Grid if they supported variable-height rows, but unfortunately they currently do not. They support lazy loading, so the chat log could be huge without problems. Well, you
use variable-height rows with at least Table, it’s just not a supported mode of use and has problems.

Without lazy loading, a lightweight layout such as CssLayout could be better than VerticalLayout if the chat log is supposed to be long.

I don’t think it would be a too difficult exercise in client-side coding to make a super-lightweight component to which you could add just text lines instead of components, as you have to do with layout components. At simplest, you could do that with just JavaScript calls to append

elements inside a root element, such as a CssLayout.

Thanks all for the replies/ideas so far.


So far, with your suggestions for scrolling I was able to come close to my desired behavior.

However the last limitation remains that items are still inserted to the top of the VerticalLayout, unless I add some sort of padding with empty labels to push all added items to the bottom.