Dynamic Width, Height & Margins

Is there a way to have dynamic width, height & margins on elements yet?

I am building a tournament bracket creator and I had to use Javascript to draw my brackets because that was the only way to do it since bubble doesn’t allow dynamic heights, widths & margins… but I am having a ton of trouble with java when trying to switch brackets. This would be so easy if Bubble allowed it.

Any updates on this Bubble?

Thanks,
Jude

Exactly what I want… I was hoping bubble had this done already or it was at least on their To-Do list. Fingers Crossed.

I wish. It would make things a lot easier for sure. :blush:

You can use a plugin

which plugin? I’ve not seen one that does this easy. The only reference I ever see is people using the percentages to adjust to screen size but in my case with sports brackets, this will not work.

Just curious, will it be for simple single-elimination tournaments only, or will it support other types of brackets?

I’m curious too because there’s a few solutions for that. I’m not sure what is your issue exactly that need dynamic heights and widths/margins… Maybe you can share screencast?

1 Like

This is my Plugin. Has dynamic width, heights and margins

I created it to support Single, Double & Triple Elimination plus 3GG which is what we will be using a ton of. It works great when I click a bracket, but because I use javascript to draw it, the browser won’t let me easily switch between brackets without refreshing the page.

1 Like

Awesome! If this works it would be fantastic.

None of the links work on the Plugin page so I was not able to test. Does it only look at percentages or can I actually plug in pixel dimensions for heights, widths and top margins?

Since these are tournament brackets, I am using Repeating groups, as I have a RG of Rounds and then nested inside each Round, I have a RG of Games… see image.

Will I be able to use your template for each element inside the Repeating Groups individually or does it only look at the parent Group?

Thanks!

You could have created your own plugins to have more power on the element automatic adjustment.

There’s also some JS script that already exist that maybe could work for your case too. But again, this is better to use in a custom plugin.

Great idea! I have never created one though… think I can use ai to help me? lol

Hum… I’m not confident with AI to work with Bubble plugin editor, but you can get help for what is related to JS/jquery for sure.

Also, you can try to find a similar plugin (element) that is free and inspect the code and how this work.

For example, I can easily see a “trigger action” function when bracket is clicked. You will need to use publish state function + trigger action function. You can read plugin editor documentation for how it work, but you can also check existing plugin so you learn how this was built.

1 Like

It’s a plugin not a template, bubble just can’t figure out there SEO to show the snapshot properly.

From the link provided in my post, click either working link under the examples listed as height and width that open the demo editor, then you can preview.

The plugin works and can use pixel values.