Since the release of the successful Classify plugin, most of the help requests I received from developers are about Bubble’s responsive engine’s shortcomings regarding the height of elements. I, myself, faced many challenges that ended up with overcomplicated workarounds to simply have a group to adjust its height dynamically.
While the new Flexbox engine gets released to everyone and gets implemented in every app, this new Spacer plugin aims to improve the responsiveness of pages.
These spacers alter the height of groups the same way text elements or repeating groups do when they stretch/shrink according to their content. Their are currently 3 different types of spacers that adapt their height based on different methods:
Custom Height Spacer:
This one’s pretty simple. You set a height value which the spacer element dynamically follows, thus resizing the parent group(s) and the page:
Viewport Height Spacer
This spacer can sync its height with the viewport (page) in 2 different ways. Whether by a percentage of the page’s height or by imitating directly page resizes (i.e.: page’s height is reduced by 20px, the spacer reduces by 20px):
Synced Height Spacer
The third spacer keeps its height the same than another element’s (anything… group, repeating group, text, input…). You have to attribute the “target element” an ID and write it into the spacer settings:
More tools will be added based on spare time & suggestions I get…