Make Horizontal Repeating Group expand vertically

Need help
1

I recently followed the excellent Building with Bubble guide to make an Instagram Clone with the idea that I can use it to rebuild the terrible mobile experience of www.minnnis.com

So far it has gone very well, but there is something I can’t work out. He uses single image groups when there is only one image in a post, and a horizontal repeating group when there are multiple images in a post.

One mobile it gives a good horizontal scrolling experience. However if I use the same page on desktop, then the single image and the horizontal repeating group behave differently. The single image will expand to take up the whole screen - which I think looks fine for desktop (maybe I will put a maximum width in). However the horizontal repeating group does not expand vertically so I end up with all the images on the screen, but very small.

I tried to make a video to show: Loom | Free Screen & Video Recording Software | Loom

There is a minimum height for the group, and image etc., but no maximum. It is a Column in the RG and set to stretch rows to fill vertical space.

In the tutorial video, I can’t actually tell how his app behaves as he does not show the RG when he is switching the app width. The single image post behaves the same as mine.

Any ideas how to make my RG expand vertically?

2

note you can add conditionals to a repeating group

if current page width < 680 use 1 column, or max width or min width = X

note also you can tell the width not to be pixels but % by clicking where it says px.

3

I don’t think that is it. I am getting the feeling that this is some kind of limitation with Repeating Groups that they somehow can’t stretch vertically.

I have decided to limit the width of the main part of my app (so it looks more like Instagram on desktop) and you can see that the single image posts all are the correct size. The ones with multiple images - which are hence in RGs - refuse to re-size vertically.

I have everything selected that should allow this to stretch, such as “fit height to content”.

see: https://minnnis.com/version-test/new_home?debug_mode=true

4

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