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…

Seems to work for me @lorenzo . Plugins “Toolbox” or “Plug Bubble” both worked to the same effect.

I tried this with a popup (reusable element) but couldn’t make it work. Anything I need to consider? What I want to achieve is a full screen slide show.

Is there a way to vertically center the content in that full-height group?

FYI, I found a way, but it is a dirty one. I would be glad if someone can share a more elegant manner to do this (especially, one that would allow having a fixed height for the vertically centered element). In the editor, I set up everything at the top like this: [image] The white group was the …

@Lucien @brian1 Dear Both, Would there be a way to have a Bubble group (or element) anchored to the bottom on the page while not to allow this group to go up beyond other groups above? This would be useful in case (like mine) where a page is not tall enough for a fixed footer while if I use floa…

Hi, @funwtp . Here is a way to obtain the viewport’s height: [image] Get viewport Height in pixels using javescript and css Need help Add a “Javascript to Bubble” element to your page, from the ToolBox plugin. Give it a suffix in its property, say “h”. Then add a workflow…

Thank you very much! All works perfectly well - I now can show/hide fixed and floating groups depending on screen height.

Thanks for sharing this! I’m having the same trouble @AliFarahat mentioned… I’d like to use this as a way to showcase a few divs down a page. Anyway to make them stack rather than overlap?

How do I allow the page to scroll when using that?

[image] brian1: $(document).ready(function(){ $(“#anchor”).parents(“div.bubble-element.Group”).css(“height”,“100vh”); $(“.main-page”).css(“height”,“100vh”) }); Thanks to all that have helped with this very useful thread! How would you go about doing something like this: Three groups stacked…

Setting a group to be % of viewport height dynamically

Tips

Lucien May 13, 2018, 7:54am 28

Hi, @funwtp.

Here is a way to obtain the viewport’s height:

Topic		Replies	Views
Dynamic Height and Width of Bubble Elements - New Plugin from Zeroqode Showcase	64	18319	September 5, 2025
Responsive Height for Hybrid Mobile App Responsiveness	33	5868	September 13, 2021
What is an actual working method to get page height to dynamically match visible content? Need help	26	16268	November 5, 2017
Dynamically adjust Bubble page heights for mobile screens - make your apps look good on mobile screens Tips	39	7325	April 21, 2024
Group responsive height Responsiveness	20	9491	September 19, 2021

Setting a group to be % of viewport height dynamically

Related topics