Changing the direction of scroll on a repeating group when on mobile?

Has anyone found a good way to turn a vertical scroll repeating group into a horizontal one when on mobile?

I know I can just use a different repeating group and have it hidden, but is there a better away? Ideally, all I want to do is just shift from vertical and horizontal when the page is below a certain width.

Would love to know if there’s a solution to this!

I’m facing the same issue on my app and would like to know whether or not bubble found a better solution. For example, on normal desktop browsers I would like to have my RG displayed in vertical scroll direction but once I change my browser size to a mobile then on a condition changing RG from vertical scroll direction to horizontal.

I’d appreciate any support. :slight_smile:

AFAIK you cannot dynamically switch scroll directions.

What i do is i have 2 RGs, one for desktop, one for mobile. Then just show them accordingly.

If you have a complex page that will differ greatly between desktop and mobile, it’s best to have a mobile version of the page.

It’s not perfect, but a solution to this is to have a condition where if the current page width is less than 700, for example, then you swap the number of rows and columns.

So if on desktop it’s 1 row and 5 columns, you can change it so that now on mobile it’ll be 5 columns and 1 row. This isn’t great for repeating groups where you want to display infinite amounts of data (since it limits it to 5 columns in the example), but this solution has worked for my use cases.

Hope that helps!

yeah i pretty much just use the hide and show trick depending on the current page width.

I came across this after creating a Tip. You can do it with some CSS.

It requires the Classify plugin. I did the how-to video with the Bubble CSS experimental feature turned on.

Let me know if you have any questions.