While Blank Space below my RG - help

Hi everyone,
I have struggled with a white blank space my app that appears after the repeating group. I have spent the whole day trying several solutions on the forum but no luck yet.

Farmgang | Bubble Editor

This is the app. any help appreciated.


There is a white space because you have the RG in Full list and 1 row.

You would need to have it set to Ext. vetical scrolling and in 2 rows :slightly_smiling_face: :computer:

1 Like

I just change this to Ext Vertical scrolling and 2 rows but it remains the same.


Try extending the height of the RG

Still same. thanks

Try having 3 rows, setting the RG´s height to 366 and having at least 15 data base entries

Thanks. this looks much better but the space below will not just go away.

The reason you’ve got white space below the repeating group is primarily because you dont have the correct page layout with your groups to get proper responsive height (there is also space below the RG in it’s parent group, so even if you did have responsive height there would still be space below it).

Currently all your groups are on top of one another, which means the height will not be responsive to what’s being displayed on the screen.

Even though you’ve set the RG’s parent group (group product list) to collapse when hidden, it wont happen because the are other groups on top of it.

In order to get responsive page height you need to stack all your groups, one above the other, rather than having then all in the same place, that way the page height will adjust to the elements which are visible and you won’t have unwanted space at the bottom.

1 Like

Thanks. Can you check the modifications I made now? I have removed the group that holds the images so I can have fewer groups.

Yeah, so now the RG is taking up all the pace of it’s parent group, so if your page was set up to have responsive height then it should show as you want it to, but currently it’s not.

You still have all your groups on top of one another instead of stacked one above the other.

At the moment you page is being rendered at the height of your tallest group (Floating Loading Screen).

In order for the page to render only to the height of the visible groups, they all need to be stacked, one above the other, with no overlapping.

In other words, have your first group positioned a the Y co-ordinate 0.

Then have your next group positioned where the first one ends (so if the first group is 300 px tall, have group 2 positioned at a Y co-ordinate of 300 on the page).

Continue this for all your groups so that they are all stacked and not overlapping at all.

That will make the page always fit to the height of the visible groups.

Thanks again. If you noticed. I am creating a one page app. Where I need to put all the groups on themselves. Most of these groups are hidden during page load so that should not affect it. I deleted the floating loading screen but the space remains. The elements currently shown are the header, search bar, repeating group and footer.

I’m not sure if it’s a bug but, having just played around with it, it does appear that having a fixed width page seems to mess with the position of a floating group at the bottom of the screen and adds some extra height between the bottom of the page and the floating group.

Try de-selecting the fixed width option on your page to see if that makes any difference.

1 Like

Waoh, this actually solved the problem. But all footer buttons have moved left of the screen.

That’s because your buttons are aligned to the left of the footer and have left fixed margins in the responsive editor. Try combining the 3 icons into a single group, making sure the responsive settings are set to keep it centred, and either make it fixed width, or set a max width depending on how you want it to display.