Reverse RG plugin: Scroll is reversed

I’m using the plugin by @lottemint.md and it works well except that the scroll direction on the reversed RG is also reversed, giving a confusing user experience. I’m not sure if this is intentional, or in the way I’ve set it up. The plugin demo page has the scroll direction correct (not reversed), but it’s not on the new responsive engine which I’m using so not sure if that has something to do with it.

Does anyone know of a way to keep the scrolling direction as expected in a normal repeating group?

I don’t understand why folks don’t just reverse the list before displaying it in this application.

There’s an entirely free solution for this in List Shifter…

Hey Keith, that was next on my list to try actually. I didn’t find any guidance on how to reverse the list so I tried this first. Anything you can point me to for reversing a list with List Shifter? I’m sure it’s simple but a how to always helps!

Go to the main List Shifter thread and watch the first videos (from when it was basic). Simply put, in the main interface, put the expression that fetches your message list as List to Shift. Also in the main interface, under shift options set Reverse to yes. Now, anytime that expression updates, the reversed list will appear at List Shifter’s Shifted List. Use that as the source for your display element (RG or similar). Done.

So that works in reversing the list, but doesn’t solve for my use case, which I didn’t mention in the original post: messaging. I tried your suggestion, and it reverses the list, but it still positions the user at the top of the list - which in a messaging thread, are the oldest messages. I can do that without list shifter - I just change the message sort to ascending rather than descending.

For a messaging RG, I want the message displayed from oldest at the top to newest at the bottom, but I want the user to start at the bottom and then have the ability to scroll up to see older messages. And I want newest messages to appear at the bottom as they come in.

Is there a way to achieve this with List Shifter?

Oh yeah, well RG’s aren’t very flexible are they? Seems like a no-brainer for Bubble to add that (load from bottom so that lazy load behavior would go upward rather than downward). For a while I was futzing with an element plugin that uses CSS Grid to make a super-fast text-only alternative to Repeating Groups, but never really finished it. Messaging type applications would be good for that.

I’m kind of shocked at the paucity of display element plugins for Bubble, but that just shows how small the user base is. :man_shrugging:

Seriously, I spend about 90% of my time wrestling with RGs to do relatively simple things. It’s pretty frustrating. Makes me wonder if I wouldn’t be faster just going full-code, since I’m already familiar with React.

1 Like

Well you could build front end components as plugins (you can load React). I’m just not super good with React and the only Bubble element with a visual interface I’ve built (Calendar Grid Pro) uses no framework at all — it’s all bare-metal CSS dynamically generated-via-JavaScript and JS.

Also, that being said, I built a little chat interface in one of my own apps and don’t recall having these sorts of issues. I’ll have to go look at what I did…

@johndurso, have you found a solution?

What I ended up doing as a stopgap was copying the plugin’s source code myself into a new plugin and commenting out the part that reversed the scroll. However, it’s still kind of wonky as it disables scroll on the page when the mouse is over the element, and it doesn’t always reverse. I can’t figure out why it doesn’t always reverse.

For a longer term solution I’d love to build something myself, but not sure how to do it. I’m also looking at Zeroqode’s plugin here which has a checkbox for explicitly deciding to reverse the scroll or not:

It’s paid, but at $25 one-time it’s well worth the time it saves me IF it does what I need.

1 Like

What I ended up doing is sorting my repeating group, so that the latest message is at the bottom and then doing “scroll to rg entry” the moment the chat is supposed to show.

It works well without any issues (and the scroll direction is correct). Makes me question why I wanted to install a plugin in the first place.

I think originally I had something like that in mind, but doesn’t the scroll to literally scroll you there? So when you load the chat, you’ll see the oldest messages then be scrolled to the newest?

I think the bigger issue for me was that the chats are threads that persist over time and users come back to, so they can get pretty long. The scroll to would mean loading a ton of messages and then scrolling all the way to the bottom, which would work but feel really wonky for the user and really slow down page load.

I initially did do a version of that where I only loaded the latest 10 messages and displayed them oldest to newest, and then added a button up top for loading more messages. It worked fine but the user expectation is just to scroll up and see the messages. That’s when I started looking for other solutions.

It scrolls instantly, so it’s not really an issue (in my case).

I wonder if using this plugin (or alternatives) would allow you to avoid using the button to load past messages.

This topic was automatically closed after 70 days. New replies are no longer allowed.