Dynamic Height & Width based on input value

Is there a way to make a group size dynamic based on inputs like below?

I asked this question in a another thread and the solution there was to use CSS/Java like this https://codepen.io/tomigm/pen/BaZwWgB

Seeing as that thread has gone down the CSS/Java route, I wanted to explore (separately) the possibility of using Bubble’s own tools (ie; no Java) in this post. I have loads of conditions which will need to be added so would prefer if the solution could be as ‘no-code’ as possible!

For context, I need to create the likeness of a window with individual glass panes. Adjusting the input values will dynamic change the Height & Width.

It may be impossible in Bubble, in which case I will have to get familiar with CSS/Java, but then I hope I can save data to my DB and update the Java/HTML based on all my inputs as easily as I could if using native Bubble elements.

I had a great suggestion from the pronocode team who said I could use SVG images, but then I realised if the glass panes were svg, they would only scale if the group resized, so I am back to square one.

Your solution will be a custom plugin with that code being used. I can do this for you, but would need compensation for time.

1 Like

Thanks, I’ve DM’d you.

Did y’all ever create this plugin or solve this? Need this. Thanks

No, but it can be done using html. You give the group an ID and in the html you can set the groups size based on the ID.

I am using this plugin to dynamically set the height and width of an element via the Element ID. It works great in combination with the “Instant Calculator” in case you want to work with aspect ratios.