Forum Academy Marketplace Showcase Pricing Features

How to get width value of a group/element?

Hey Bubblers,

I’ve got a fairly simple capability I’m in need of; getting the value of a specific group or element’s current width? I’ve tried a few different plugins geared towards resizing elements to see if I could probe their exposed states for width or height, but haven’t had any luck. I’d imagine there could be a way to do this with Element ID and one of the CSS/HTML/Javascript tools, but I’m not quite sure how it would be possible to grab this value to use as an input for another field. I’ve seen a lot of usage of these methods that transfer data in the direction of Bubble → layout (resize group manually), but not Bubble ← layout (tell me the group’s current responsive width so I can use the value to make Bubble do something).

My use case is in attempting to “move a draggable element” (Bubble’s draggables) to a position based on the current width of the dropzone’s parent element. This would mean I could resize the page, which would trigger a workflow via CSSTools’ “Finished Width Change” property, at which point an action fires off to move this draggable element to a percentage of the new width, based on a little expression and the previous position’s values. I know that the current page width is available as a value to use, but my draggable groups need to placed relative proportionately to the dropzone they live in, and it’s hard to know exactly how the width when things are resizing at the discretion of the responsive engine’s dynamics.

I should also note that I’m building this new page on Bubble’s new responsive engine, so I have the ability to place an object of some sorts below my draggable area with the parent group set to column, such that this lower group or object would stretch to the same width as the dropzone, and I could query its width. The only problem is I haven’t yet found an object that will let me query its current width :upside_down_face:

If anyone has ideas for a way to simply get the width of a group, or any element that would stretch to a responsive group, via a plugin or something like CSS/HTML/Javascript, we’ll be all set.

Thanks so much!

Hi @jgh3 ! :slightly_smiling_face:

This sounds complicated. I’m wondering if you may just have to do this based on the the current width of the page, as you stated. It may just involve a little trial and error to get the exact positioning. But you’re right, a plugin would be ideal in this situation!

I’ve been thinking I might have to do just that. As long as I can keep my responsive structure simple enough, I should be able to create a variable that calculates the width of the inner group. Just seems like it would be more reliable (and simple!) to reference the width of the group directly. One Bubble day.