Option to match page height to currently shown content

Not sure if this is possible, but it would be amazing if the height of the app could somehow auto adjust to the currently shown group. Very useful in mobile web apps, to give a more native feel. I know there are workaround’s, but they seem very hack-y and not at all ideal.

2 Likes

Well that’s what making groups collapsable is for.

All of my groups are collapsible, but the height of my page does not change.

I’m building a single page app

Can you check you don’t have a group somewhere that is still there, or a shape? If you can reproduce a situation on the forum app with 3 groups that are collapsable and it doesn’t collapse it’d be helpful to look into it.

Will try now

@emmanuel, what I’m talking about is very easy to reproduce, perhaps we are thinking of different issues?

here is a recreation on the forum app of the general layout of my app, utilizing 3 different groups. Switching between groups using the menu has no effect on page height.

It’s a request I wanted to make also @emmanuel

For instance using a menu to showe/hide groups with different sizes, there is an important blank space at the bottom of the page when “short” groups are shown.

^Exactly, There a couple of posts on the forum dealing with some form of this.

I would say the same thing: that’s what collapsible groups are for: so please set up a situation where this doesn’t work and we’ll look if there is a bug: it’s a setting on the groups, not the page.

@emmanuel

Did you look at this example?

I’m not sure if you are saying that we should fill empty spaces with empty collapsible groups. This does work to some extent, but is not optimal.

If you are saying we should simply make all the groups collapsible, and the height will adjust, I believe that link is what you asked for.

Is there any resolution for this? I have a similar challenge for a web application. I need to show an iframe that’s full screen (without scrolling). Groups collapsing doesn’t address my challenge either so looking for ideas on how to get this done. Thanks!

I hate to bump old threads, but I am also dealing with this particular situation. I am creating an app where a single group is visible on a page at any one time (1 of potentially a dozen hidden groups), using conditional logic to hide and show. This group is set to be collapsible, and to hide on page load. What I think is going on is that the groups inside each master group are not collapsing. Any further discussion on this matter would be awesome. Maybe there could be a toggle on a parent group that can easily mark all inner groups to collapse when hidden?

2 Likes

I am having the very same problem and can not find an answer on the forum. Does anybody has a solution for this issue ?

I have also reproduced a very simple case here : https://forumshare.bubbleapps.io/version-test/page_height?debug_mode=true

As you can see, even if both groups collapse when hidden, page height does not change. No matter screen size or any other set up option in the page itself. @emmanuel could you please help me with this problem ? Thanks

2 Likes

adding to this thread. i have a “shop” page with 4 groups. one for desktop, tablet, large mobile, and small mobile screen widths. the groups hide/unhide depending on screen width. they are all set to collapse when hidden. i want to have a footer at the bottom of the page but i can’t figure out how to make sure it’s always at the bottom of the page. any ideas?

2 Likes

i’ve tried putting the footer outside the groups and ive also tried putting the footer inside the groups. but since the groups are different sizes, there’s always unwanted white space either under the footer or over the footer.

please advise

1 Like

I have struggled with this a lot. I am not too familiar with CSS but I know that CSS might have the ability to force a footer to always appear at the bottom of the browser window - unless the height of all of the visible elements are greater than the height of the browser. In this case, the footer can adjust to be below the last visible group.

It would be nice to have this option for footers. I envision something like:

footer position y = the greater of:

browser height minus footer height (or) last visible group’s y position + last visible group’s height

This would eliminate the excess white below a footer when the page doesn’t have much content displayed. I prefer the excess white to be above the footer rather then below it. Or at least have this as an option.

I have a work around for the blank space at the bottom. You could have a transparent repeating group in the reusable element so that when its visible the page height will expand and when its not it will collapse.

1 Like

Is there a solution already? I have the same problem here, that when short groups are shown an excess white space shows at the bottom of the page. Really an issue for me I would like to resolve.

1 Like

The trick is actually like Muradamod suggested. What I did was match the heights of all groups, and put hidden groups which collapse in the smaller groups. As such, the excess space is removed´!

1 Like

Has anyone been able to find the solution for this.
I have 8 groups in a group all collapsable but on hiding it comes as a blank space.
Want to have these groups to be shown as continuous bar :frowning: