Repeating group responsiveness on mobile

Need help Responsiveness
1

I’ve been looking throughout the forum, and I can’t find a solution on how to get repeating groups to be responsive on mobile

The repeating group with four yellow services does not expand in width when stretched out, but the repeatinggroup does, but it’s left blank on the right side.

I don’t have the group as fixed with either. The individual cells are not expanding for some reason.

People have been posting about responsiveness for repeating groups for years, but still no responses or solutions.

Screenshot_161
Screenshot_1611035×697 53.3 KB
Screenshot_163
Screenshot_1631023×587 58.1 KB
Screenshot_164

2

responsive rg

Is this what you are looking to do?

3 Likes
3

I’m just trying to keep 4 flat across when stretched sideways. I’d like the yellow boxes to be evenly spread out.

The white boxes are a separate repeating group, the number of white boxes should be 8, but I’m not sure how it became 16. I have a fixed number of cells set to 2 rows and 4 columns.

4

Look at the datasource. It is probably returning results for a search that have 16 results. If you only want 8 you need to restrict the number of results in your search. Use :items until #8

This can be a real pain but is possible. I spent a bit of time doing it today in my app. I think there is no easy way to keep them evenly spread if you are going to change the page width while using only one repeating group.

You should use more than one repeating group to get a consistent margin. Otherwise just doing what is done in the linked editor will allow you to have only one repeating group.

1 Like
5

Thanks Boston. I hope Bubble will be able to fix this in the near future

6

Thanks! This is what i needed… looks like switching my Repeating Group from “vertical scrolling” to “Ext. Vertical Scrolling” and turning off “Fixed width” completely fixed the responsiveness issue on mobile :slight_smile:

1 Like
7

Thank you!

8

This is awesome, man! I’m trying to stack cards in responsive mode and was struggling using columns.
Great resource, although I didn’t manage to repeat your result… but I’ll get there.

9

You can copy the element into your own app to have it as a starting point and then adjust the sizing to fit your needs.

10

That’s a great idea; the thing is that I already have the element designed.
But no worry, man, I’ve figured out!

Thanks again for being so thoughtful.

11

Hi, is there a reason this repeating group is so low in the page? I’m working on mine and noticed if it’s not on the bottom like yours it won’t do what this achieves - changing columns as the page width changes. Is there a workaround for this if you know what causes this by any chance?

12

No it will work anywhere you place so long as you don’t have other elements interfering with it.

1 Like