Forum Academy Marketplace Showcase Pricing Features

Dynamic Height and Width of Bubble Elements - New Plugin from Zeroqode

We have just published a new plugin - Dynamic Height and Width of Bubble Elements.
This plugin would allow you to dynamically change any element’s height/width depending on the viewport or page size.
In case you choose the “keep proportion” option please make sure the element that you apply it to has “fixed width” enabled, otherwise the responsive settings might conflict with the plugin width adjustment.

For details, screenshots and demos please visit https://zeroqode.com/plugin/dynamic-height-and-width-of-bubble-elements-1531219051458x936969735410548700

If you have questions about this plugin or need any help, please reach out at https://forum.zeroqode.com.

For instructions how to set the ID attribute to a Bubble element please visit this ID attribute guide:

Levon Terteryan
Founder @ Zeroqode & Bubblewits

zeroqode-for-web-160x120

Bubble Templates
Bubble Plugins
Bubble Courses
Convert Web to iOS & Android
No-code Development Services

9 Likes

If I use this plugin to control say a Group acting as the hero section of my website, when the viewport/page size changes will the elements inside this Group stay centered as well, example “call to action” button etc…?

Thanks,

they should, but the best is to try, and if something doesn’t work as expected we can look into it and try to fix it promptly

Hey @levon, can I transfer this plugin between different apps? I would like to use/test it in a test app and then move it over to my live app once I get a solid understanding of how it works.

Thanks,
Brett

Hey Brett,
i don’t think it’s possible but you can subscribe to the monthly option on the test app, use it as long as you need ( you will be charged for the actual number of days used not the full month), then uninstall it and buy with a one time payment on the live app.
hope this helps

Perfect, thanks I will do that.

Just subscribed to the plugin which works great. Only issue im encountering is when I create say a hero section for example using 100% height of viewport, I would like to keep the CTA button centered within that hero/group containing the dynamic height plugin settings keeping the CTA button centered as the viewport height shrinks from desktop to mobile. This doesn’t seem to be possible with current plugin unless I am missing something on my end.

right, the centering option is part of the responsive settings of Bubble while our plugin interferes with that by forcing certain height and width. However we have another plugin that can change the position of any element, if you can calculate the exact x,y position of where the button has to be then you can manipulate that :slight_smile:

Hi @levon ,

Does this work for dynamic height/width based on user input stored in data field? I’m building a Canva style app, and the user can choose dimensions or enter them. Then we have a ‘canvas’ group element that needs dynamic height/width based on those variables - does this do that?

Hi Reece, i think for that you can use this plugin https://zeroqode.com/plugin/move-and-resize-bubble-elements-1526288794550x294926147549659140

1 Like

Thanks!

Hey Reece, did this work for you? We need a similar behavior. How’s the Canva-style app coming?

I ended up scrapping it haha and deleting the app in the end. Can’t help here but i’m sure it can be done :slight_smile:

I’m super new to Bubble, so apologies if this is a silly question, but can I use this plugin to make the entire app fit the viewport? I’m making a native app and I want my index and the repeating group on the index to match the height of the viewport.

Hello, @jcpollari. Thanks for reaching out :slight_smile:

Yes, you can use this plugin for your purposes. But also I can advise you to take a look at the responsive settings of your app and use Floating groups. They can do a job too:
https://www.loom.com/share/1b1d13302b784ebc867195898284eadf

The Floating group can “pin” your repeating group to the height of the viewport and responsive settings will make your page look fine on different mob devices.

A bit more info about responsive settings you can find in the 3rd lesson of our course Bubble for Beginners:

Hope this will be useful for you :pray:
Regards,
Zeroqode Team

Awesome, thanks so much for your detailed reply. I will give this a go.

1 Like

Hi again. I can’t work out how to pin the height of the floating group to the viewport. I tried following the instructions in the video you linked, and the course lesson 3, but I couldn’t see how to fix the height. I’ve tried other fixes in the forums but no success. Do you know of any other resources I could use to learn how to do this with floating groups?

Hello, @jcpollari.

If you want to pin the floating group to your page and make it dynamically change, depending on the device viewport, you need to set its parameters to:
image
Also, this group should be the same, or as close as possible, height as your page.

I hope it helps :slightly_smiling_face:

Regards,
Zeroqode Team

Thank you, that seems to be working now for me for sizes smaller than my page height (not quite with ones bigger yet - there’s a big gap until my footer) - I imagine that your plugin does a better job so once I’m ready with all the other functions I will give it a go with the plugin. Thanks heaps!

@jcpollari,

You are always welcome :slightly_smiling_face:

Regards,
Zeroqode Team