Forum Academy Marketplace Showcase Pricing Features

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

Hello, @quantumind
Thanks for reaching out and reporting this issue.

Please note, that we are already checking this issue :pray: Thanks for your attention.

As for this question, can you please provide us with a bit more details? If it is possible, please provide us the screenshots or even a screencast of the flow, you are implementing.

It will help us to analyze your request and provide detailed feedback from our side.

Looking to hearing from you soon.
Best regards,
Zeroqode Support Team

Hello again! :slightly_smiling_face:

We have fixed the demo. Now everything should be fine. Thanks for the cooperation!

Regards,
Zeroqode Support Team

Hi Zeroqode, I just bought the plugin and I’m new to Bubble, the question I have is if it can help me adjust the height of the page, which in this case are groups. I made a landing with several pages (groups) the detail is that I have a lot of blank space on the other pages. Thanks


This is an example of what a page (group) looks like, I want to remove the white space

Hi @dr-live, thanks for reaching out.
Thank you for your purchase, we highly appreciate your interest in our products.

Regarding your question,

Yes, it is possible but I would not recommend doing this, because the plugin was designed to work with separate elements of the page. Since this plugin is making changes in percents, it can crop some of the page content, and this is not the best solution.

My suggestion is to check if you don’t have any blank space between the footer and the bottom margin of the page inside Bubble’s editor.
As well, when you hit preview, the page you see comes with the Debugger is active, this is causing the page to look different from what it is. See here how to change.

Please try my suggestions and let me know if they helped. :pray:
Best regards,
Zeroqode Support Team

nothing comes out in input, seems the plugin does not work…

Hi @dophaminum.
Thanks for reaching out. It seems like the plugin is fully functional on our demo page.

In order to help you with resolving the issue, we need to understand how exactly you configured the plugin.
We would appreciate it if you share more details related to the reported issue, namely screenshots and/or screencasts of your setup - workflows, plugin settings.

As well, please see the plugin’s Demo Editor page to compare your setup with it. :pray:

Looking forward to your reply.
Best regards,
Zeroqode Support Team.

Hi, I subscribed to try this plugin but it’s not working as desired. Please help.

Details:
Page width and height are 960 by 840 respectively and I have 3 groups. Width and height for the groups are 770 by 300, 770 by 250 and 540 by 105. Group 1 had a margin of 27px from top of page while group 3 had a margin of 21px from bottom of page. I dragged the dynamic element tool into each group. In the dynamic plugin element settings I made group 1 to be 80width and 35 height (i.e 80% of viewport width and 35% of viewport height), group 2 was 80width and 30height while group 3 was 56width and 13height. The groups were not fixed width. ID attribute for each group was set accordingly as anchor1, anchor2 and anchor3 in the groups element settings and also referenced in the top fields for the dynamic element settings.

Problem:
When I did a preview with different device dimensions, I was not getting dynamic height and width across all devices like iphone12/13 pro max, iphone 12pro, iphone6/7/8, ipad, ipad pro and Samsung G20/Ultra.

The page behaved very differently with all the devices and page was not dynamic.

I provided details of what I did so you could possibly replicate it at your end.
Please help.
Thank you

@ZeroqodeSupport please help with response to post 53 above. Thanks!

Hello @abiola.idris

Thank you for reaching out.

We have tried to replicate your use case and seems it works well on mobile devices. Can you please provide us with more details regarding your use case? (screenshots, and video recording of the issue if possible).

Also, are you using the plugin on the new responsive engine? The issue you are describing might be happening due to the new responsive engine, as currently the plugin is configured and optimized to the old Bubble’s responsive engine.

Looking forward to your reply.

Regards,
Zeroqode Support Team

@ZeroqodeSupport,

Thank you for your response. I’m not using the new beta responsive engine.
I uploaded screenshots. Something is definitely wrong on my end.
These were my steps:

  1. Three groups on the page.
  2. Each group given ID attribute.
  3. Dynamic height element dragged into each group.
  4. Dynamic height element has the ID of the group at the top field but the dynamic element does not have it’s own separate ID.
  5. I’m not using the new responsive engine.
  6. The preview on Chrome looks awkward





Looking forward to further response and help.
Thank you!

Thank you for providing additional details @abiola.idris

Can you please make sure that the following conditions are present in your setup:

  1. The groups are named differently, e.g Group A, Group B, Group C.
  2. Make sure that the Element Position in plugin element is set to “Centered” and not fixed.
  3. The IDs are set up correctly.

Please let us know if it helps and the preview is different now :slight_smile:

Regards,
Zeroqode Support Team

Hi @ZeroqodeSupport,

The problem still persists. I have “centered” the Element Position in plugin element. IDs are set up correctly. I have also switched between “viewport” and “page” preferences. There is not a change in the result.

On iphone 12/13 pro max, all three groups are showing basically because the device height is longer. But on iphone 6/7/8 plus, the third group is barely showing because device height is reduced. And on iphone SE, the third group is totally absent.

The dynamic height and width is supposed to fix this and make all three groups to show on the viewport regardless of the device. But frustratingly I’m not having this experience.

Please see screenshots. Thank you :slight_smile:



The plugin works a little bit differently than what you are trying to achieve. Height and width are taken as a percentage of the width and length of the device viewport.
For example, your device is 390 x 844, the plugin element has the conditions 20% 50%, then the plugin will take these conditions as 390 * 20% and 844 * 50% and create a block of this size. Therefore, it is inevitably going to look differently on various devices.

As a workaround, you can try setting up conditional that if the screen size is a certain height and width then values of the width and height of a block are 30, 50%(or any values you require) to eliminate the possibility of that block being not in the frame of a device.

Please let me know if you have any other questions.

Regards,
Zeroqode Support Team

@ZeroqodeSupport,
Thank you for your response. I suppose your explanation points to the same understanding as mine. By your example with device 390 x 844, a group with plugin element setting of 390 * 20% and 844 * 50% will show a group that occupies 20% of device width and 50% of device height. Following that, let’s use another device of 414 x 736. Now we have 414 *20% and 736 *50%. The group will show a group covering 20% of 414 width and 50% of 736 height. Of course, the resulting width of the group in first device will be 78 and for second device it will be 82.8. However, on both devices the group should look about the same relative to the device. I mean both devices will accommodate it relatively the same way. So it invariably means that giving the same setting, groups will be accommodated the same way on different devices, using this plugin.

Please let me know further if my assumptions are not correct. Otherwise, it means I have the wrong plugin for my use case. Wishing to learn more.

Thank you!

@abiola.idris ,

The blocks are displayed differently depending on the screen size. The blocks are also not going to be adjusted in the same way if the percentages of the width and height are different, for e.g 50 30 10, are going to be displayed differently on various screen sizes. If one of the phones has longer height dimensions, and width and height percentages are set differently the third block will be displayed distinctively from others, because of the plugin element settings percentages, and longer screen size. If the screen size is too small, some of the blocks might be hidden due to the large percentage of height and width that it is set in the plugin element, therefore, how the blocks are displayed are highly dependent on the screen size and the plugin element settings(height and width).

As it was mentioned in the previous post, in order for the plugin to work for your use case you can try setting up conditional that if the screen size is a certain height and width then values of the width and height of a block are 30, 50%(or any values you require) to change how the block is viewed on various devices or adjust the height and width in the plugin element settings.

Please let us know if there are any other questions.

Regards,
Zeroqode Support Team

Hi @ZeroqodeSupport

When I use this plugin with the new responsive engine, the target element will be fixed and not scrollable. Just like parallax. Has this bug been reported?

Hello @akio.imaike

Thank you for reaching out.

Unfortunately, currently, the plugin is optimized to work on the old responsive engine and has not been updated to work on the new responsive engine, therefore some of the features might not work well on the updated Bubble’s engine. We are still awaiting a New plugin editor from Bubble that is compatible with the New responsive engine, and as soon as it is released, our team will start optimizing plugins for the New responsive.

You can find more information regarding Bubble’s Plugin Editor & New Responsive Engine here: Plugin Editor & New Responsive Engine [beta]
Zeroqode’s announcement regarding new responsive engine: New Responsive Engine for Plugins Announcement

Hope for your understanding on this matter.

Regards,
Zeroqode Support Team

Hey,

I have just installed the plugin but the action isn’t appearing in the workflow. Any ideas?

Thanks.

Hello @r.sorrell

Thank you for reaching out.

If you have successfully installed the plugin, please make sure you do the following:

  1. Place the plugin’s element called “Dynamic-Height” on the page
  2. Go to the workflow and then click on “Add action”
  3. Go to “Element Actions” and select "Set Dynamic H&W a dynamic height"


Please let us know if there is anything else we can help you with.

Regards,
Zeroqode Support Team

1 Like

Ah I apologise, I didn’t know about the “Dynamic-height” element!

1 Like