Forum Academy Marketplace Showcase Pricing Features

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

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.

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… Loom | Free Screen & Video Recording Software

Thanks!

Brian

2 Likes

You can check out this post it might help

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 :slight_smile:

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.

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.

Contact Bubble support about it.

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

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 :slight_smile:

Brian

This topic was automatically closed after 14 days. New replies are no longer allowed.