While Blank Space below my RG - help

bosunjohnson · 2021-02-08T16:37:28.055Z

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.

rg845×876 25.6 KB

hacker · 2021-02-08T18:08:50.030Z

Hey,

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

bosunjohnson · 2021-02-08T19:44:24.058Z

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

@hacker

hacker · 2021-02-08T20:08:14.073Z

Try extending the height of the RG

bosunjohnson · 2021-02-08T20:16:46.366Z

Still same. thanks

hacker · 2021-02-08T20:37:04.870Z

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

bosunjohnson · 2021-02-08T20:46:29.710Z

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

adamhholmes · 2021-02-08T20:50:48.451Z

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.

bosunjohnson · 2021-02-08T21:12:47.488Z

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

adamhholmes · 2021-02-08T21:31:15.863Z

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.

bosunjohnson · 2021-02-08T21:46:58.986Z

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.

adamhholmes · 2021-02-08T22:25:24.128Z

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.

bosunjohnson · 2021-02-09T08:21:48.242Z

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

adamhholmes · 2021-02-09T11:17:39.683Z

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.