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

[levon]

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 Dynamic Height & Width of Elements Plugin for Bubble | Plugin for Bubble by Zeroqode

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:

How to add ID attribute to HTML elements

Bubble allows setting custom ID attributes to almost any element. This might be very useful for using in various plugins or custom HTML/JS snippets of code. Here is how to enable the option and set a custom ID First, navigate to the app Settings -> General tab, and tick the checkbox next to "Expose the option to add an ID attribute to HTML elements: [image] then open the properties of any element and scroll down to the bottom, there you will see a field called “ID attribute” [image] you…

Levon Terteryan
Founder @ Zeroqode & Bubblewits

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

[felipe]

Hi, I got a little confused. How different is it from the native ability to change sizes of elements in bubble?

[levon]

Hey Felipe,
Bubble doesn’t have native ability to dynamically change sizes unless it’s the responsive settings (which is different).

[peter2]

I’m using this and I would love to have a function that can adjust the element to another element or determine the absolute X and Y…

[ben3]

@peter2 Suggestion is a really good one. If you are able to get an element to dynamically adjust its height between two elements that would be amazing.

[paulo.d.miri]

@levon. I just acquired the Plugin. It is amazing but I could not make it work on a group that is not visible on page load and just made visible when a custom state changes. Am I doing something wrong or does the plugin not have this capability? Thanks

[Ecaterina]

Hello, @paulo.d.miri
Thanks for using our plugin.

Allow me to point out that in case you added a Custom State, you need to create a special Workflow for it.

First of all, please be sure that you have indicated the required ID Attribute in the plugin element. Also, do not forget to set a Correct Condition.

Please find my screenshot:

Please find the example of instruction for setting your use-case:

1. You need to create a Button, which will create the conditions for the change of custom state:
   

   

2. Workflow for this Button must be the next:
   

   

3. Also, for correct work of your Custome state, you need to create an Event for the state:
   

   

Hope my advice will help you.
Regards,

[Julia]

Hey, everyone!

We’d like to inform you that we have updated the Demo page.

Now you can try the plugin and see how it resizes the image according to the specified screen percentage and maintains the aspect ratio when the page is resized.

Hope you will like it

Best, Julia

[raphou-54]

Hello,

I bought the plugin and followed the instructions but cannot make it work.

Is there something else to do than.

• Check the box "Expose the option to add an ID attribute to HTML elements
• Set the height and width in the dynamic-height element
• Give the element that we want to control the size an ID attribute
• Put this ID in “IDs” in the dynamic-height element

For me its just doing nothing.

Thanks for the help

[Greg.P]

Hi @raphou-54, thank you for your message.

It will be good to double-check the ID attributes names, as well you could share a screenshot of your settings from the ‘properties window’ so we can check it from our side.

Let me know if you sorted it out.

[zak]

Hello

I just installed this plugin to help manage scrolling content in popups - it’s almost working very well with the plugin controlling the height of the form wrapper:

However whenever you add a new line in any text input, the height is reset and the plugin seems to lose control of the element. This is presumably because Bubble is recalculating the height and overriding your plugin.

Is there anything different I should be doing to handle this?

Thanks

Zak

[Ecaterina]

Hello, @zak
Thanks for reaching out.

Please allow me to check your request and to revert to a solution for your case.
Thanks for the understanding.

Best regards,

[Ecaterina]

Hello, @zak
Thanks for your patience.

In order to speed up the process of investigating your case, can you please share with us the screenshots with the plugin settings?
We need to know how exactly are configured all elements on the page, mentioned earlier.

Looking to hear you soon.
Best regards,

[zak]

Hello @Ecaterina, no problem.

Here are the settings:

I noticed that the same thing happens for both ‘Element position: Centered’ and ‘Fixed’.

Cheers,
Zak

[Ecaterina]

Hello, @zak
Thanks for the screenshot.

Can you please let us know how exactly you are willing to use the plugin?
I’m afraid, that currently, is not clear the required flow within your application is.

This plugin would allow you to dynamically change any element’s height/width depending on the viewport or page size.
But the dimensions of your page are not static, and it can be the reason for the reproduced error.

Please let us know an exact flow for your app for the investigation.
Best regards,

[c356778]

Hi,
I recently purchased this plugin for bubble (Dynamic Height and Width Plugin) and seen to have an embarrassingly simply question. In the properties editor of the plugin, i seem not to be able to type in the percentages in the height or width input fields. The fields only allow me to input dynamic choices. How can i input the percentages?

[Serg]

Hi @c356778, thanks for reaching out.
Any questions are welcomed

@c356778

How can i input the percentages?

Just find with the mouse cursor a spot where on click you can add the data\numbers.

Hope it helps. Please let me know if I can help with anything else, related to our plugin.
Regards,

[c356778]

Thank You as this helped!

[Serg]

Hi @c356778, thanks for letting us know that issue is solved
If you like our plugin you can rate it by going to the Plugins tab in Bubble editor. Find the plugin by name and it gives it as many stars as it deserves

The more feedback we get, the more motivated we are to make things better in Bubble.
Have a nice day!
Regards,

[Ecaterina]

Hey all!

We are happy to announce that our Dynamic Height & Width of Elements Plugin was switched to the New Responsive Engine, as well as its Demo Page was changed too: https://zeroqode-demo-04.bubbleapps.io/dynamic_size_new_responsive

Now, you can be sure that this plugin will definitely work in your application

I hope you’ll find it useful!
Best regards,