Automatically scroll Scroller

I have MessageList that I put in VerticalLayout that I put in Scroller, and I want that every time a user sends a message or gets a message Scroller scrolls automatically to the bottom (so that new messages are always in focus)

The MessageList component already does that out of the box

Here is a recording

I am trying to make it so message input is always on bottom and when they send message that it scrolls down

Also the “total” height of page should stay the same, and not expand

        VerticalLayout chatLayout = new VerticalLayout(list);
        chatLayout.expand(list);
        Scroller scroller = new Scroller(new Div(chatLayout));
        scroller.setScrollDirection(Scroller.ScrollDirection.VERTICAL);
        scroller.getStyle()
                .set("border-bottom", "1px solid var(--lumo-contrast-20pct)")
                .set("padding", "var(--lumo-space-m)");
        scroller.setMaxHeight("50vh");
        add(scroller);

Thats why I put maxHeight to 50vh as test

You can remove the chatLayout and the scroller, they are interfering with the message list’s built-in scrolling

That does make it so that it scrolls automatically, but I am unable to set maxHeight of message list

I am trying to do this:

  • have fixed size of message box like a) and when there are too many messages have scroll b) inside that message list
    What is happening:
  • message list expands and pushes input c) out of the “page” and scroller d) of the whole page appears

I guess simply I want to set max size of message list and if size of its contents excedes the max size, scroll should appear inside message list, I do not want for “height or length” of the whole page to increase with additional messages

I tried with maxHeight setter but it doesn’t do anything. I was close with rapping it inside of scroller, but I cannot find a way to scroll to the bottom of scroller automatically

I can verify that the MessageList does indeed work as you desire, so the problem is probably in the layout stack that contains the MessageList - each parent layout also needs to have a height set (e.g. to 100%). Otherwise the 100% height of the ML is 100% of undefined, which is, of course, undefined.

It’s also possible that you’ve run into an annoying flexbox behavior present in HorizontalLayout. Without going into details, in case one of the parent layouts is a HL, you might need to setMinWidth(“0”) on it for this to work correctly.

I have set maxheight of everything to 50% still not working

This is a simple test so I only have one main parent layout

public class ChatView extends VerticalLayout {
...
        list.setMaxHeight("50%");

        input.addSubmitListener(submitEvent -> {...});

        VerticalLayout verticalLayout = new VerticalLayout(list, input);
        verticalLayout.setMaxHeight("50%");
        this.setMaxHeight("50%");
        add(verticalLayout);

That is the only class I have in whole project

ok but you’re not actually setting a height on anything. MaxHeight is not sufficient.

Also, be aware that a height of 50% means 50% of the parent, so even if what you do there would work, you’d be setting your ML to be half the height of verticalLayout, which is half the height of the view, so your ML would be a quarter of the view’s height.