The repeating group is, for now, only top fed. This means that the list defaults to showing content at the top of the list first. Adding a new entry to the list and being able to see it happens at the top. You have to scroll to see the content at the bottom of the list.
This makes it hard to enable chat scenarios which , for a variety of reasons, strongly prefer bottom fed lists.
I found a pretty light weight way to do this. I havent done extensive testing across platforms & browsers yet so use with caution.
Youâll need the following free controls
- Classify to assign classes to elements https://bubble.io/plugin/classify-1568299250417x684448291308175400
- Toolbox to run a little javascript https://bubble.io/plugin/toolbox-1488796042609x768734193128308700
To do this weâll need to
A. Flip the repeating group vertically (which flips the content and the scrolling)
B. Unflip the content within the repeating groups
C. Un-reverse the scrolling
A. Flipping the repeating group
- Make sure element ID attribute is exposed. You do this in settings~general.
- Add a html control somewhere on the page and add the following text inside the control
<style> .mirror { transform: scaleY(-1); } </style>
- In the properties of your repeating group add the following in the ID field.
messageList{addClass: âmirrorâ}
If you test it now you should see the repeating group is flipped and the top of the list will be at the bottom. But ⌠everything inside the list will be upside down. Youâll also notice that scrolling is backwards within the repeating group.
B. Unflipping the content of the RG
Unflipping the content within the repeating group is just as easy.
- Simply reference the mirror class we added to the html earlier.
{addClass: âmirrorâ}
Now if you check your RG again youâll see that the content is no longer upside down. But ⌠scrolling is still backwards
C. Unreversing the scrolling
Youâll need a little bit of javascript for this.
On the page load event create a ârun javascriptâ workflow. Add the following javascript.
function chSwitchScroll(event)
{
chScrollPosition = chScrollPosition - event.deltaYif ( chScrollPosition < 0) chScrollPosition = 0
if ( chScrollPosition > msglist.scrollHeight) chScrollPosition = msglist.scrollHeight
msglist.scroll(0,chScrollPosition, {behaviour:âsmoothâ})
event.stopPropagation()
event.preventDefault()
}var chScrollPosition = 0
msglist = document.getElementById(âmessageListâ)
msglist.addEventListener(âwheelâ,chSwitchScroll,false)
And thats it.
Combined with the new responsive engine that bubble is betaâing (which is actually pretty good) its now very possible to make a chat feature that works as youâd expect.
