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.
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…?
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.
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
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
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?
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.
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
Regards,
Zeroqode Team
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?
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:
Also, this group should be the same, or as close as possible, height as your page.
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!
Hi @levon, I have just purchased the plugin for my app and started playing with it. I can’t find out how to get it to do what I want though. What I want is:
Header group floating relative to top (with nav icons and text logo)
Middle section with cards taking up the full screen, minus footer
I realise why it’s not working is because I don’t know how to make it that I want the footer at the bottom below the repeating group. Is there a way to do that? Like, repeating group height = 100% minus the pixel height of the footer?
Also, when set at 100% the card section is still cut off at the bottom of the page:
