Repeating group (vertical scrolling) scroll to bottom on open

[andrew6]

Hey guys- I built an app with peer to peer chat, but I need the chat window which uses a vertical scrolling repeating group to automatically scroll down when new chats/messages come in.

Right now it auto pulls up to the top, and if new messages are sent it scrolls up a tad.

Thanks!

[scottb50]

Try to set the scroll to the list’s :last item when the list is updated.

[andrew6]

Thanks Scott… is that in the repeating group? or where do I put that info in?

[andrew6]

would that setting be within the repeating group?

[andrew6]

Got it!

https://bubble.io/reference#Actions.ListShowPrevious.wrap_around is the link for anyone interested, didn;t realize it was an action, and not in the repeating group section.

[tpmc123]

Hi @andrew6, @scottb50,

I have created a peer-to-peer messaging system as well. I am able to get my repeating group of messages to scroll to the “last item” upon page load (or reload) and when a “send message” button is clicked from the same page. See image:

But how I can set up an event listener to scroll to the “last item” when a new message is added to the repeating group of messages remotely (by another user)?

Thanks,
-Tim

[tpmc123]

Ok, in answer to my own question “But how I can set up an event listener to scroll to the ‘last item’ when a new message is added to the repeating group of messages remotely (by another user)?”

This is looking like it works:

• Create a custom state attached to the repeating group of messages. Custom state should be a number. It will track the ‘count’ of messages in the chatbox (aka repeating group of messages)

• Create a workflow event that fires when page is loaded (Click here to add an event… > General > Page is loaded). It should (1) scroll to ‘last item’ of chatbox, then (2) set the custom state described above to number of messages in the chatbox.

• Create another workflow event (Click here to add an event… > General > Do when condition is true). Edit the “Only when” setting to fire only when the ‘count’ of the chatbox (aka the repeating group’s messages count) is greater than custom state’s count (aka when another message is added to the conversation). There are 2 steps in this workflow event: (1) scroll to ‘last item’ of repeating group and (2) set state to (newly updated) ‘count’ of messages.