Horizontally wrapped and horizontal scrollable repeating group

how can i achieve this look with an RG (wrapped and horizontal scroll)?

screen recording

i’ve done it creating buttons manually but i need to use an RG, horizontally wrapped gives the look but not the horizontal scroll, setting column width gives you the ability to horizontally scroll but not the wrapped look.

i’ve tried a whole bunch of ideas and nothing has worked. can this be achieved in bubble or is it a full custom solution? i’ve considered recreating the entire RG in a html element but i just cant be bothered to write out all the code - hence why im using bubble lol.

Horizontal scroll (extensive example) (codepen.io)

Maybe this can help you.
Just use a little CSS and it should be good to go.

see if this works for you
image

@GH5T so rebuild the RG in a html element? or do you mean that CSS would work with the RG? it’s also only one row of items.

@jefeoliveira22 are you applying this with the same RG settings as above? all it did was center the buttons, it still wraps as the screen gets smaller.

the idea is basically a fixed width container wide enough to wrap the buttons onto 3 rows, this is then inside a container that is the width of the viewport and scrolls horizontally. pretty much like how an iframe would work.

Maybe something like below:
chrome_3yaNdPsgeh

As you said, there is a container outside a wider repeating group. The trick is to have this outside group’s overflow to be auto with an HTML element:
image

Here is the editor if this would help: Tests for Forum 11 | Bubble Editor

2 Likes

oh man as simple as that… how did i miss that :man_facepalming:t3:

thanks!