Can I set the scroll of a label component to the bottom?

Questions
1

Hello,

I am trying to implement a chat-like functionality, and I have all my messages in a form variable (String) that is set as dataprovider for a bootstrapcomponents-label shown as trusted_html.
Is there a way I can set the scroll of the label component to the bottom?
After sending each message I reset my form variable, but then the scroll goes to the top.

Thank you,
Diana

2

Hi Diana,

Is it not possible to use a Data Grid/Power Grid and put your messages in a foundset/dataset? Seems to me that something like that is a bit nicer to show an amount of messages. Those components also have a ‘scrollToSelection’/‘scrollToRow’ method that might be of help?

3

Hi Diana,

I’m going to add something to Ruben’s reply in case you are not aware, because it is not documented well:

There is a flag you can set on the column you use to display the message in a data grid to get the row to auto-expand to show all the text in a column.

Look at the properties for the column in the grid.
In ColumnDef, add an entry for autoHeight and set it to true. In your css for the project add something like:

.show_all_text {
	white-space: pre-wrap;
}

and add show_all_text to the styleClass property of the grid column.

Your grid rows should now expand to show the full chat messages.

4

Noted, thank you, Ruben and Christian, for your good suggestions.

In the end I could do it just with css, by setting the style on the container of the chat to:
{
overflow: auto;
display: flex;
flex-direction: column-reverse;
}
this way the browser treats the bottom like it’s the top.

Then i changed the sort on my chat items and I have my bottom scroll on the label.

Wish you a nice day,
Diana