MARKETPLACE
PLUGINS
DYNAMIC WIDTH AND HEIGHT
Dynamic Width and Height logo

Dynamic Width and Height

Published July 2022
   •    Updated February 2026

Plugin details

This plugin allows for a 3rd height, width and top margin setting of an element. Now you can calculate the height of the target element by setting it's height to be 100% of the viewport +/- some pixel value. Alternatively you can create a calculation using 5 values to determine the desired height, width or top margin of an element.
Great for when you need to set an element height to fill the screen while taking into account floating headers or bottom navigation bars.

This plugin also enables Single Page Apps to be viewed beautifully on mobile browsers. Using the element Mobile Page Height the element will expose the value of the page height, while taking into consideration the visibility of the web browser address bar, and locks the page height and removes ability of page refresh on scroll up. This solves a lot of headaches for Single Page App design and the irritating reloading of the page if the web user scrolls up beyond the top of the page.

$35

One time  •  Or  $10/mo

stars   •   0 ratings
153 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Boston85719 logo
Boston85719
Joined 2018   •   13 Plugins
View contributor profile

Instructions

Place the dynamic height or dynamic width, or both, elements onto the page. Set the ID attribute and the height/width settings.
For examples please view

Height: https://bubble.io/page?type=page&name=dynamic-height&id=demo-plugins-for-marketplace&tab=tabs-1

Width: https://bubble.io/page?type=page&name=dynamic-width&id=demo-plugins-for-marketplace&tab=tabs-1

When working with the demo pages, make sure you remove the debug_mode URL parameter for demonstration of dynamic height. If you have the debug_mode URL parameter on a preview, heights are not rendered properly (not issue with plugin, just issue with Bubble flexbox system and the debug_mode URL parameter).

Types

This plugin can be found under the following types:

Categories

This plugin can be found under the following categories:
Containers   •   Mobile   •   Technical   •   Visual Elements

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble