Full List sizing problem

I’m not quite sure how to title my problem. But, my situation is this.

I made a video of the problem to help illustrate: footerpush - Gifyu

As you see the Notes list is fine because it only had 3 times, but the Person List pushes the footer because it has more even though they are not visible.

I have a repeating group which I have set to full list, and using CSS made it so that it resizes to fit various viewports. However, bubble seems to layout the page using the size of the full list’s total height if it were visible, even when it is not visible (because it is resized to the viewport), which is to say if the list contains 20 items that stretches to 900px, the footer at the bottom of the page will be down at 900px, even if given the viewport size the repeating group is actually only visible up to 600px (because CSS has not stretched it).

If I set the RG to vertical scrolling this doesn’t occur (so full list is the problem), but then the data in the RG doesn’t stretch with the viewport. That is, with vertical scrolling, CSS will stretch the RG but it wont stretch the data, the items in the list just get cut off at the original height (prior to stretching). In order to use CSS to stretch the RG with its data, I had to set to Full List, but, then this pushes the Footer way down to the RG’s potential height, as mentioned.

So, vertical scrolling will not display data when the viewport is stretched (even if CSS is stretching the RG). Full list will display data, but also pushes anything below the RG downwards the height of the list’s height even when the list’s height is capped, resulting in a massive space between the bottom of the list and the footer.

I’m not sure if I explained this well, I hope you understand, looking for some answers, thanks!

1 Like

I’ve reproduced the problem in a simpler form.

If you have a full list it stretches to fit the data and pushses any element below the list downwards.

If you use CSS to limit the height of the full list, it appears shorter but the actual full list size still pushes the elements downward.

So, the problem is that the CSS is only shortening the Full List’s appearance, but not the actual list.

So my question in its simplest form is this:

does anyone know how to use CSS to resize a full list while preserving the page layout (elements below the list from being pushed down).

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