I’m able to do some wonderful things with Bubble but I’m still struggling with getting full-height groups. I can’t seem to get a page height to dynamically match the height of the currently visible group. CSS etc is not my strongest suit so I’m sure I’m missing something. Can someone please advise what has worked for them, please - ideally with an example (feel free to use my linked demo app below)?
Below is an attempt to summarise the various suggestions I’ve seen on the forums to do this. None get the job done effectively as far as I can see - though I’d be happy to be corrected.
CSS Tools plugin - I’m now able to adjust the height of a main container group with this plugin but I can’t get the page height to behave. There doesn’t appear to be a detailed, working example of this.
Use a collapsible transparent group that you hide and show as needed - This seems to have only limited use. When you have a single page app with lots of groups, some are bound to overlap and this method becomes impractical in my opinion.
Use a floating group - none of the options - bottom, top or both get the job done. Where I’m able to get a full-screen group, a scroll bar appears.
Make the page height quite short and it will adjust to the height of your group - I find that this cuts off content in groups that are longer than the original page size
Use JS to set a group to a percentage of the viewport - this seems to allow a parallax scrolling on mobile. It does cuts off the group on desktop for me and on mobile, the page is not shortened to fit shorter groups.
Bumping this. I guess it’s a tough problem, but I’m sure one or two people have solved it for their own apps and I’m keen to learn what has worked for you.
Hi @louisadekoya The only one way that I’ve found to have consistent collapsing behavior is to stack almost all of the the groups vertically so they don’t overlap (This would be a challenge for a one-page app though). One workaround may be to have groups of the same or almost the same height to overlap (making it easier to edit/manage), and then place them all in one group. Then have the longer group(s) beneath that group, set to collapse when hidden. This way, when the shorter groups are shown, the longer groups are collapsed and the page height will adjust to the shorter groups? Not 100% sure this will work as expected, but might be worth a try!
Thanks @fayewatson. I have struggled to make collapsing groups work, mainly because, as you say, I have a one-page app and most of my groups overlap. I will give your suggestion a try though - thanks again.
Hi @louisadekoya, I’ve been looking through the way we do this in our app and we don’t yet have a great solution. We primarily use two solutions which often work for us, but we also have places in our app in need of a solution but that don’t yet have one:
Our solutions
We make the page height fairly short (e.g., 600px) and then set the page to have a background image. Bubble auto-stretches the image to the full background of the viewport if it’s greater than 600px. However, with this we can’t put any interactive buttons, links, etc. below the 600px because they aren’t clickable (from what I recall anyway).
We use JS to make iFrames full height and full width. This works well for our video conferencing app, but don’t know that it helps elsewhere.
Thanks, @sridharan.s - these sound interesting and are worth trying.
@fayewatson, I tried your suggestion in the sample page I linked to above and I didn’t quite get the desired results. I have a mix of methods in the sample page so maybe they are getting in each other’s way. I will clean it up and try again when I get a moment. Thanks again.
I can’t help thinking that this deserves a baked-in Bubble feature.
I believe @gf_wolfer has solved this by using a non-visible group (unchecked visible on page load), that collapses when hidden (checked).
Of course, there is one for every “master” group on a single page…but there is no overlap, as they never appear simultaneously…so perhaps this could work for you.
Thanks, I will take a look. A quick question in the meantime, please - can I assume that a ‘master’ group in this context is a group containing child groups of a similar height? Also, by non-overlapping, do you mean stacked on top of each other?
@louisadekoya, I was testing around a few other methods today and I think I’ve found one that is consistent that allows you to overlap floating groups (set to float: nothing, so they behave similarly to regular groups!)
Preview:
Editor: (*The forum is adding *amp but the page is called “collapsing-groups”)
In this example, there are three floating groups (blue, green, orange). They all are not visible on page load and overlap beneath the buttons (the buttons toggle each fg):
Then there is a single collapsable group beneath the floating groups which stretches the length of the page, (not visible on page load), that collapses in height. This way, the collapse occurs once the page is loaded, but when the longer floating groups become visible, the page adjusts dynamically.
I’m almost sure this will work for everything as long as each group in the mobile app is converted to a floating group (float: nothing), none are nested, and the collapsible group stretches the length of the page. Let me know if this works for you too!
@fayewatson, this looks very promising indeed. I will test it. Curious as to why this would work for floating groups (float:nothing) and not for groups. I never use the nothing float as I assumed it was no different then to a group. One concern with this method is how it would work with Responsive, because floating groups don’t seem to, er respond well to the engine in my experience. But let me give it a go first.
As noted earlier, I originally made every group the same length as the longest group and made them all collapse when hidden. Then placed a group within the shorter groups to collapse when hidden. This works, but you need to make sure you set up all the collapsing groups which can take a while to right if it’s your first time. Not sure if it’s the optimal way or not, just a way that worked well.
Excited to hear how the floating groups or any others work out.
I also had thought there was no difference between the two. I think it works for floating groups because when they are overlapping each other, the responsive settings of the fgs do not affect each other. However, if groups are overlapping, their responsive settings will interfere with each other and be difficult to manage.
As a comparison, here’s the exact same page setup with the floating groups converted to regular groups (the height doesn’t collapse in the same way):
I think the best bet might be to have the floating groups be the width of the page (or close), and then you can place any other elements inside of it and responsive should work as expected (Hopefully!).
1. Using collapsible groups within equal-height groups
I tried this @gf_wolfer and whilst it does cause my groups to resize as I want, it doesn’t appear to adjust the size of the page itself. It is possible that I’m missing something but if you look here, you’ll see that for group A the page is still much longer than the group. What I want is for the page height to shrink (or extend) to match the currently displayed group.
2. Using float-to-nothing floating groups
This also comes close @fayewatson. I think it is incredible that you thought to even try this particular configuration. The issue with this seems to be that it doesn’t extend the page when the group is longer, especially when you have a RG that lengthens the group beyond the original page height. Please see here for an example - groups B and C.
The only one way that I’ve found to have consistent collapsing behavior is to stack almost all of the the groups vertically so they don’t overlap (This would be a challenge for a one-page app though). One workaround may be to have groups of the same or almost the same height to overlap (making it easier to edit/manage), and then place them all in one group. Then have the longer group(s) beneath that group, set to collapse when hidden. This way, when the shorter groups are shown, the longer groups are collapsed and the page height will adjust to the shorter groups? Not 100% sure this will work as expected, but might be worth a try!
