Changing page height based on group's height

Need help Responsiveness
1

Hi All,
I’m new to bubble.io and developing my first application. I’m working on a single page application and for that, I’m hiding and showing the groups on the same page and my page size is 800. The issue is my group A’s height is 750 based on content and group B’s height is around 1200. So is there a way to change the height of the page dynamically based on the active/displayed group?
Thanks in advance.

2

I assume you mean height not width?..

In that case yes, here’s how.

Your page height needs to be the combined height of all the groups within it, plus any spaces between them, above, or below them.

So in your case your page height needs to be 1950 (assuming you don’t have any headers or footers) and the groups need to be arranged on the page, stacked one above the other.

In other words, Group A’s vertical position should be 0, group B’s vertical position should be 750.

Make sure each group (A and B) is set to ‘collapse height when hidden’ - that will ensure that when they are not visible they don’t take up any height on the visible page.

Use custom states to control which group is visible (with conditionals on the groups). When group A is visible (and group B is hidden) the page height will be 750. When group B is visible (and Group A is hidden) the page height will be 1200.

1 Like
3

@adamhholmes Sorry for the typo, I updated the question. This thing is working like charm on groups, Thanks a lot man really appreciate that. But what if I was using reusable elements instead of groups? We don’t have collapse height when hidden options on RE.

4

You’ll need to put the RE inside a group on the page, and set that group to collapse height when hidden.

1 Like