Repeating group layout to adjust naturally to content rather than fixed widths/heights or rows/columns

james46 · 2024-12-19T19:54:25.782Z

I have a repeating group that prints out a list of categories as buttons. I would like for this list of categories to just naturally take up the size that each category’s text needs.

This is the outcome I’m looking for, where: 1) each category is on a SINGLE line of content, it never wraps in the button, and therefore each button contains a single line, 2) the button isn’t bigger than the content, 3) the content is next to each other and moves down to a separate line only if it doesn’t fit (which is why the 3rd category, a really long one, moves to a new line, rather than stay on the same line as the first 2 categories). Hopefully this makes sense.

Screenshot 2024-12-19 at 11.53.51 AM1182×290 10.9 KB

I’ve noticed that the button sizes are controlled by the spacing the RG has set up.

So right now I have the following RG set up:

Screenshot 2024-12-19 at 11.46.42 AM674×1222 65.4 KB

This produces the following outcome

Screenshot 2024-12-19 at 11.46.25 AM818×444 36.2 KB

Whereas if I set 2 columns, as here:

Screenshot 2024-12-19 at 11.47.57 AM668×1242 59.7 KB

Then I get this:

Screenshot 2024-12-19 at 11.48.12 AM1398×422 31.5 KB

Really unclear how to set up the RG to get what I want, thanks!

Bluebird · 2024-12-19T20:20:00.592Z

unticking the fixed columns and setting it to wrapped horizontally should do the trick

james46 · 2024-12-21T02:47:25.000Z

where’s the option to wrap horizontally?

Bluebird · 2024-12-21T11:16:06.224Z

the scroll direction dropdown.

james46 · 2024-12-21T18:44:20.933Z

ok interesting, so I did those 2 changes

Screenshot 2024-12-21 at 10.42.56 AM334×644 29.5 KB

t

i still got an unexpected result, the buttons are still not single line (this isn’t the end of the world, I need to shorten the content anyway), but there’s a really weird gap in spacing between 2nd & 3rd button? it appears Bubble is taking the width of the widest column and copying that across to all columns…