Display full page (width and height) and without a scroll bar

[scottb50]

Setting a group to be % of viewport height dynamically

One of the struggles with Bubble can be the dynamic setting of a group’s height, for instance having an element be 100% of the viewport height. Here’s how to do it: Create a small HTML element in the group you want to target. Inside of it create an empty div, and assign it a class or ID (in this example I used an id of “anchor”) <div id="anchor"></div> Install the JavaScript Toolkit Plugin. This will give you the ability to run JS within a workflow. Create a new workflow for the page…

I used that to do this:

Using Plugbubble plugin (), add some Javascript for when the page loads:

$(document).ready(function(){ $("#anchor").parents("div.bubble-element.Group").css("height","100vh"); $(".main-page").css("height","100vh") });

Then create an empty html element and don’t show it on page load. Set the id to that element to “anchor”

It took some tinkering in the Responsive editor, but it worked out well.