Group won't stick to the bottom

Need help Responsiveness
1

Link: Bubble | No-code apps

I’m trying to get the white group (#sticky) to stick to the bottom but it’s not working. I think it might be because the #contents group (the one with the 3 blue boxes) is exceeding the page viewport height. Any ideas on how to fix it?

2

To give more context: I’m running this javascript on page load, in order to set the height of the 3 main columns to 100% of viewport:

$(document).ready(function(){
var otherElementsHeight = 0;
var generateHeight = $("#sticky").outerHeight();
$("#page").parents(“div.bubble-element.Group”).css(“height”,“calc(100vh - " + otherElementsHeight + “px)”);
$(”.main-page").css(“height”,“calc(100vh - " + otherElementsHeight + “px)”);
$(”#middle").css(“height”,"calc(100vh - " + (otherElementsHeight + generateHeight) + “px)”);
});

//Handle window resize
$(window).resize(function(){
var otherElementsHeight = 0;
var generateHeight = $("#sticky").outerHeight();
$(".main-page").css(“height”,“calc(100vh - " + otherElementsHeight + “px)”);
$(”#middle").css(“height”,"calc(100vh - " + (otherElementsHeight + generateHeight) + “px)”);
});

And I’m using this CSS to make the #sticky element stick to the bottom:

#sticky { position: sticky; bottom: 0px; }

The CSS works when I remove the javascript above. But removing it results in the 3 columns exceeding the height of the page.

3

I wonder if you could achieve this native in Bubble with the following:

  1. set the page to row, min-height a small number – let’s go with 300
  2. create the 3 blue groups
  3. each of those groups should NOT have the “fit height to content” checked
  4. set the middle group to column, space between
  5. add 2 groups, the 2nd group is your white box
1 Like
4

It worked, thanks a lot @rico.trevisan :rocket:

1 Like