Is there a way to achieve this layout? Masonry

[karaulal]

Hi all, this has been on my to-learn things for months and no way to figure it out.

Is there a way to achieve masonry layout on native mobile using a short list, horizontal list, selectable list or in some other way. It needs to be using dynamic data so no way to set up 16 fixed groups with conditionals.

The example in the screenshot is an inbox feature and would need to display recipients as shown - in masonry. The screenshot is edited in PowerPoint, that is what I’m trying to achieve.

For now, I use short list and have it set to one column where one entry = one row. It’s okay but can be better.

Best!

Luka

[designers.netizens]

1. Create a Repeating Group

• Add a Repeating Group (RG) to the page.

• Data source → your list of recipients (dynamic data).

• Layout style → Fixed number of rows/columns.

2. Set Layout to Horizontal Wrap

• In the RG Layout tab:

  • Set Layout direction → Row.

  • Enable Wrap to next line .

  • Set Min width for cells to something like 100px (so Bubble knows how to wrap).

Now Bubble will automatically flow recipients to the next line, like Gmail chips.

3. Design the Cell

Inside the cell:

• Add a Group or Text element to show the email.

• Style it like a “chip”:

  • Background: light gray (#f0f0f0).

  • Padding: 8px left/right, 4px top/bottom.

  • Rounded corners: 20px.

  • Margin-right: 8px.

Optional: add a little X icon inside so users can remove recipients.

4. Responsiveness

• Go to Responsive editor.

• Make sure the repeating group is not fixed width.

• Recipients will wrap to the next line dynamically depending on screen width.

[karaulal]

Wow I appreciate this. Definitely implementing it.

I do have trouble locating “Wrap to next line”. Do I enable that somewhere like ID attributes are enabled?

[georgecollier]

The user’s answer is unfortunately a ChatGPT response which is incorrect and that option doesn’t exist. Repeating groups don’t exist in mobile native if I remember correctly…

[designers.netizens]

We can use a repeating group, and using the parent tag, we can set the flex direction column.
So we can set it one entry = one row

Right, If I’m wrong, correct me

[georgecollier]

@designers.netizens

We can use a repeating group, and using the parent tag, we can set the flex direction column.
So we can set it one entry = one row

You cannot use a repeating group in native mobile, which OP’s question is about.

[karaulal]

Yes, I thought it was strange. Didn’t find that option but Bubble docs does mention “containers” “wrapping horizontally”.

That is something that would seem core feature, but can’t do dynamic wrapping.

[designers.netizens]

Could you please share your preview link

[karaulal]

You sure know how to put a twist on everything @georgecollier

[karaulal]

I found a post that creates this layout using html but I’m trying to make it natively.

Posted it on ideaboard some months ago and told the Bubble team. It seems basic and so often I find needing that layout but no way of implementing it - needs to be dynamic.

[designers.netizens]

Maybe SelectableList works for you

[karaulal]

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 bu…

Here is css that worked for someone else, bound to try it but is for web only - uses HTML element.

Can be done with dynamic data but there are limits.

[karaulal]

@georgecollier

You cannot use a repeating group in native mobile, which OP’s question is about.

Revisit my original post… I understand you want to be helpful but nowhere did I mention RG in native mobile…

[georgecollier]

@karaulal

Revisit my original post… I understand you want to be helpful but nowhere did I mention RG in native mobile…

You (OP) asked about native mobile.

@karaulal

Is there a way to achieve masonry layout on native mobile

@designers.netizens suggested a repeating group

@designers.netizens

. Create a Repeating Group

• Add a Repeating Group (RG) to the page.

@georgecollier

@designers.netizens

We can use a repeating group, and using the parent tag, we can set the flex direction column.
So we can set it one entry = one row

You cannot use a repeating group in native mobile, which OP’s question is about.

To which I correctly said would not be a solution for your problem

[karaulal]

You are golden