Page length won't shrink to fit group height

[darren.james7518]

I’ve read loads of posts on this but there’s no solution, which seems odd?

My single page app has a main ‘index’ page of 2000px high with many individual groups inside with vary in heights.

Collapsing and hiding groups makes no difference, the index page always remains at the height you initial set, in my case 2000px.

Why is this an issue?

My footer remains all the way down at the bottom of the index page, whilst some groups are only 300px high so the page needs to scroll a long way to reach the footer. Why can we not simply collapse the actual index page to fit which ever group is visible?

I’ve tried various CSS but no joy.

Close, by no cigar

If you only have text on a page you can set the text box with a height of, say 200px and if you have loads of text the text box will expand and push the index page height down. This is brilliant, but it won’t work if you have other elements other than a text box.

[adamhholmes]

For this to work you need to ensure each group on the page is ‘stacked’ one above the other in the editor - i.e. the bottom position of one is the start position of the next, and you don’t have any overlapping groups, or groups with the same y coordinate.

So you need to make sure that you have the correct page layout in the editor otherwise, as you’re experiencing, the page will remain at the height of the tallest group.

It’s a bit of a pain to do it with the legacy responsive engine, especially if your page is already built. With the new Responsive Engine the correct layout is maintained automatically.

Edit: An alternative way is to make sure that each container group is the same height (i.e. 2000px) then have an extra hidden group within each container that takes up the space between the bottom of the content and the bottom of the container group (i.e. with a height of 2000 - the content height), and set that group to collapse when hidden. Seeing as your page is already built this may be the easiest way to get your page height working the way you want it to.

[darren.james7518]

@adamhholmes

Edit: An alternative way is to make sure that each container group is the same height (i.e. 2000px) then have an extra hidden group within each container that takes up the space between the bottom of the content and the bottom of the container group (i.e. with a height of 2000 - the content height), and set that group to collapse when hidden. Seeing as your page is already built this may be the easiest way to get your page height working the way you want it to.

Thanks @adamhholmes, some great advice here. I think the having an extra hidden group within each container that takes up the space between the bottom of the content and the bottom of the container group is a potential great solution for my use case. I have about 100 individual groups so it could get messy, I wonder if these ‘ghost’ groups can all be grouped in a single parent ghost group, I will experiment!

Before I jump into this, I have just learned of this plugin which may also be a solution Spacer Plugin | Bubble

[darren.james7518]

@adamhholmes This solution worked perfectly. I have created a diagram below to help others visualise the solution.

[paul17]

I used to use the "ghost " groups as well, but the new responsive engine has solved this. Unless I am missing something, just set the minimum height of the page and all group’s to 0, and tick the fit height to content check-box (under the layout tab). The group’s and page will then automatically resize to the content that is shown, as long as these can collapse when hidden. The footer will move up to be below the content though (depending on the margin that you set), so if you always want the footer at the bottom of the page for various screen sizes, that is another issue. Showing a spacer group on larger screens may still be the solution, which are hidden and collapse on mobile.

[darren.james7518]

I haven’t used the new responsive engine but it sounds like you have a good solution. The ‘ghost’ groups work great for me. If you always want the footer at the bottom of the page for various screen sizes you just need to put the footer inside the page group, so it’s always at the bottom of the main content. I create a reusable footer and added it to each group so that I can update footer links globally.

[darren.james7518]

I wanted to add more info because I have worked out how to shrink the page to fit the content (as detailed above) but also shrink to fit mobile view.

My one page site works on the assumption that the standard wide view page height should be H768px. I have a header, page content and a footer. Between these elements I have two ghost groups, one always collapses so that the footer pulls up to the bottom of the page content, the other collapses on mobile view. Hope this helps anyone struggling.