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

Forum to discuss the new web client version of Servoy.

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

Postby bodnarescu.diana » Wed Apr 12, 2023 2:11 pm

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
Diana Bodnarescu
Servoy Valued Professional
Freelance Servoy Developer
bodnarescu.diana
 
Posts: 25
Joined: Tue Mar 29, 2016 10:43 am

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

Postby Ruben79 » Wed Apr 12, 2023 9:19 pm

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?
Ruben de Jong
Stb Software Development
SAN Partner

Stb Software Development - http://www.stb.nl
User avatar
Ruben79
 
Posts: 97
Joined: Wed Apr 18, 2007 12:43 pm

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

Postby swingman » Thu Apr 13, 2023 9:41 am

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:

Code: Select all
.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.
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1472
Joined: Wed Oct 01, 2003 10:20 am
Location: London

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

Postby bodnarescu.diana » Thu Apr 13, 2023 12:04 pm

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
Diana Bodnarescu
Servoy Valued Professional
Freelance Servoy Developer
bodnarescu.diana
 
Posts: 25
Joined: Tue Mar 29, 2016 10:43 am


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 8 guests

cron