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.
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. https://youtu.be/yrLuf67wWVo
Let me know if you have any questions.