Horizontal Repeating Group has ZERO responsiveness... what am I doing wrong? (With video)

[anon10873777]

Hello Bubblers!

I am creating a bottom menu for a mobile app using repeatable groups as recommended from @petter 's awesome book, The Ultimate Guide To Bubble Performance (pp. 154-155).

Highly recommended. Here’s a link to his release.

The Ultimate Guide to Bubble Performance - the new edition is out (now 210 pages!)

[mockup-no-bg-no-shadow-websize] I’m very happy to say that after months of work, the new revised edition of The Ultimate Guide to Bubble Performance is out! The new version has more than 50 pages of new content, including a detailed guide on how to think about database structuring - one of the most requested guides from the first book. There’s also a full section on all the steps Bubble goes through while loading a page - @philledille you’re gonna like that one For those who ha…

However, I am having major difficulties getting this horizontal repeating group to be responsive.

Mimicking whatsapp, the Bottom menu has 5 items currently horizontal scroll.

There’s

• The Repeating group
• A group holding the icon and label
• The icon
• The label text

The RG, the group IN the RG, the text, have zero restrictions in responsiveness.

Yet the whole thing acts as if it is fixed width.

Any idea what I am doing wrong?

Here’s a video… https://www.loom.com/share/91bd50b9bb804903ac39e50bb1d93aeb

Thanks!

Brian

[boston85719]

You can check out this post it might help

Repeating Group Responsive

Have a look at this editor. On the index page at the bottom is a basic version of the responsive repeating group I showed in the video. If you don’t want a fully responsive RG then the issue you have with the extra space, maybe related to how the elements are grouped to gether. When I make RGs to display products, I create a reusable element that is the ‘card’ to display all details of the ‘listing’. After that I drop it into an RG and I usually don’t have any issues.

[anon10873777]

Thanks @boston85719

I am trying to copy your method but I am having a weird effect…

I can’t get the “collapse margins when container width is less than…” box to appear on the repeatable group unless the group is a certain size.

I have tried putting in more nested groups so I could chain those together.

However, that then falls apart a couple levels deep.

I think it has something to do with the width of the button relative to the page?

Not sure what the solution is after that?

Any ideas?

Thanks

[boston85719]

The collapse margins container width option is a pain to deal with. Recently had an exchange with Bubble support about the issue.

Basically the option to collapse margin is only available when the container element is not set to fixed width ( and I believe this is for all parent containers )…also the containers can not be set to not visible on page load, they have to be available on page load. Also the use of hiding rules affects the access to the ability in a strange and inconsistent way.

You can make the changes needed to get the option to appear, set it and then get other elements set back the way they were and the collapse will still work with the exception of fixed width containers.

[anon10873777]

All my containers are set to be responsive and not fixed width.

The problem occurs when they are below a certain width.

That width, unfortunately, is much higher than the 50px for the button.

Otherwise your solution works pretty well.

And unfortunately there are no “collapse width when hidden” options.

[boston85719]

@anon10873777

And unfortunately there are no “collapse width when hidden” options.

Contact Bubble support about it.

@anon10873777

That width, unfortunately, is much higher than the 50px for the button.

Change the widths to fit to your needs. You can change them…I think the example is set to 320px

[anon10873777]

Sorry @boston85719 I wasn’t being clear so made this video to hopefully show the problem…

There’s a weird snapping back to size even without any max width settings engaged.

It stretches for a bit and then snaps back.

Any ideas or if you know what I am looking for is impossible that would be great to know!

Thanks again

Brian