Big empty space at bottom of Netflix-like page

[eurogar]

Hi! I have a Bubble page similar to Netflix (different sliders of pic thumbnails, one slider per category). All the sliders/categories (they look like a row of pics) are one below each other, with a total of 8 categories, and when you click on one of them, a new group is shown just below the clicked category (as happens on Netflix when you want to see details about a movie). These extra shown groups are hidden by default and are only shown when the category is clicked (and hidden again after another click), and this works perfectly. The problem is that when the page is loaded, and since all these groups are hidden/collapsed in the beginning, there is a huge empty space at the button of the page, which gets fully filled only when you click on all the different categories (so all the extra groups are displayed for all the categories). How should I do to avoid showing this huge space at the bottom?

I’ve been applying the solution to this post -with a similar problem-, but I cannot fix it just putting a hidden group in the bottom of each extra category:

[SOLVED] Page Height Not Collapsing

Hi there, is anyone experiencing an issue where the page height is not expanding/collapsing appropriately? Background I have a single page application, which page height is set to 1200px (even though its mobile) as the longest content I have requires that height. I have multiple groups in this page where the longest group is 1200px in height, and the others are lesser. The only group which I have visible on page load is only 400px in height. There are buttons which show and hide the groups bas…

Maybe I have to make some of the groups not collapsable? Any ideas are very welcome! Thanks a lot!

[keith]

I make a few observations and suggestions about how to style pages to be fully “height dynamic” here:

Dynamic height for multiline input in group in repeating group

@J805 has the right idea here. When you want everything on a page to be “height-dynamic” or what you might call “height responsive”, you need to control the height of things partly by how you have the elements set up in EDIT view. One way to think about it is: Most elements in Bubble do have a minimum height. However, this is not a property that we set programmatically. You might say that the minimum height for an element is implied by its height in the editor. Let’s look at an extreme exampl…

One thing you might not have noticed is that Repeating Groups on a page will set their minimum height by how many rows are shown in edit mode. This is likely what’s keeping you from seeing their height collapse fully.

[eurogar]

Hi and thanks for the answer, @keith! However, and after reading your answer, I have to say that my repeating groups are horizontal, so one single row. So it should not be a problem of how big the repeating group is, right?

Very high level, the editor looks like this, with the extra groups hidden, so shown as empty spaces (I’m showing in the pic only 2 out of the 7 repeating groups):

And here, the same editor view but showing the hidden extra groups (they are shown when clicking in one of the thumbnails of the corresponding repeating group):

On the other side, this is how the whole thing looks like in run mode with the extra groups hidden (all good!):

And in run mode again with the hidden groups already shown after clicking on one of the repeating groups (all good as well!):

All looks fine in run mode, except for a huuuuge empty space at the bottom of the page that is driving me crazy and that looks like this (actually, I’ve had to cut the picture because I cannot zoom out more to allow you to see the whole empty space!):

Let’s see if you come up with more cool ideas! I’m sure the solution is related to hidden+collapsable groups, but I don’t know where to put them or if I need to change the size of my 7 categories/repeating groups. Thanks a lot!

[andrewgassen]

In your editor, is the bottom of the page aligned to the bottom of the last collapsed group?

[eurogar]

Thanks a lot and indeed, @andrewgassen The last collapsed group is “almost” touching the containing group (the big group or “canvas” that contains the 7 groups of, each of them, a repeating group plus an extra hidden group that can be shown). It’s not aligned it 100% in length to the very end of the group (I leave a few pixels to then make the action of handling the group easier). Do you think this could be a problem? Thanks!

[andrewgassen]

I don’t know if it’s a hard rule, but I’ve noticed that if my page isn’t lined up exactly, it gets weird. Might be worth trying just to check?

[eurogar]

Just tried aligning all to the bottom and I still have the same issue, @andrewgassen

[andrewgassen]

That’s unfortunate. Vertical responsiveness is a pain

[rossliddell]

Have you tried making the page way smaller than it should be? Eg. 600 height - I’ve had to do this before to stop big gaps at the bottom

[fayewatson]

@eurogar Are any of the groups which become hidden even slightly overlapping each other? Or are there any other elements on the page which could could be under or over the repeating groups that should be collapsing?

(If not, could you share a link to the editor, or create a copy of the app with just that page? )

[sridharan.s]

FYI @rossliddell - in the past, when we’ve made pages, say, 600px in height even though the content is longer items more than 600px down the page are no longer clickable. Perhaps this is something Bubble has fixed, but something to double check for sure.

@eurogar, I had the same problem on a complex page. After more than 1/2 a day trying to figure it out the problem without success (so frustrating!) I ended up having someone write me a line of Javascript that resizes the height of the page element so that it stops at the bottom of our footer. It’s a bit clunky to need JS for this, but if you can’t find a clean way to do it there is this as a workaround.

[eurogar]

I will try making the length shorter, @rossliddell! Thanks for the hack!

[eurogar]

Thanks a lot for the help, @fayewatson! My elements are not overlapping each other. The only thing is that I have the hideable groups inside bigger groups that are also hideable/collapsable (the group inside is shown when clicking in the group outside, and the group outside could be hidden if I don’t have elements in the corresponding repeating group). So it’s a kind of “hideable tree”. I’ll create a copy of the page later on and will share it with you in the editor. Thanks a lot!

[eurogar]

That looks like a thing to try, @sridharan.s! Thanks for the tip! Is the script also “responsive” (so if the length changes because a hidden group is hidden, the footer stays visible at the bottom, so the length grows)? If so, and as you already validated that it works for you, could you probably share the JS piece of code here? Otherwise, I’ll try to do something by myself and then we can compare and see if it makes sense Also, I imagine you just used a JS element in a workflow on page load to place the script, right? Thanks a lot!

[sridharan.s]

Here’s the code I used:

var el = $('#footer');  //this is the group/div that you are targeting
var bottom = el.offset().top + el.outerHeight(true); //this gets the bottom of the group/div

document.getElementById("full-page").style.height = bottom+'px'; //set the height

Note, you’ll also need to add “footer” as the ID of the footer and “full-page” as the ID of the full page.

I set this to run as an action and I put the action within a custom event. Then, I call it once the page has fully loaded. Additionally, I didn’t set up the JS so that it auto-resizes each time something on the page changes height but there are two solutions for that:

• Run the Custom Event after any workflow is run that could change the page height.
• Run the Custom Event every “x” seconds.

Best of luck!

[eurogar]

Thanks a lot, @sridharan.s! I tried my own version (it works for me), that looks not very different from yours. I’ll place it here so that other people can try both versions. Basically my approach does the following: attaches the footer (id #footer) -in the very bottom of the page by default- to the end of an element I’m using as an “anchor” or reference where I want to have the footer (id #reference), and then it cuts the length of the page (id #full_page) just after my big group that occupies almost the whole page (id #categories), minus 80px (this is what works for me). Please note that I use the “anchor” or reference because otherwise my footer goes to the end of the page, after the huge empty space, so I need to “bring it to the top” before I cut the page’s length.

To do this, I split the whole thing in 2 steps (both of them inside a “Do when Page loaded (entire)”). First step:

$( document ).ready(function() {

var full_page= document.getElementById("full_page");
var categories = document.getElementById("categories");
var footer = document.getElementById("footer");
var reference = document.getElementById("reference");

function insertAfter(el, referenceNode) {
    referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
}

insertAfter(footer, reference);

});

Second step:

$( document ).ready(function() {

setTimeout(function(){

var full_page= document.getElementById("full_page");
var categories = document.getElementById("categories");
var footer = document.getElementById("footer");
var reference = document.getElementById("reference");

full_page.style.height = (parseInt(categories.style.height) - 80) + "px";

}, 1000);

});

Then, you can re-use the second step only every time you hide or show a new element, so that the whole page gets resized every time (you only cut the page, that’s why you don’t have to run the first step, related only to move the footer just below the last element of the page). Note that I’ve had to add a delay (setTimeout) of 1 second, because otherwise the JS code runs before my elements are displayed (if you set a delay, you wait until all the elements are displayed after every action, and only then you run the JS code inside the function).

Hope using either @sridharan.s’ code or my code other bubblers can solve this issue with dynamic lengths. In any case, I really think this is just a hack, and that Bubble should improve this feature At least, for now, it works for me. Thanks guys for all the support! You’re the best!