Hi everyone,
We’ve released a feature allowing you to access an element’s width and height properties in the editor. Here is an example of how it will look:
Happy building!
31 Likes
Amazing! Just confirming this doesn’t let you set an elements width/height based on another element right?
1 Like
Now only if we can actually do height and width dynamically we could make use of this. 
Looking forward to future updates. 
8 Likes
Hi Kathleen, whenever you do a feature announcement, can you please include a real world use case. Bubble never include real world use cases when they do feature announcements and it’s baffling why they don’t.
8 Likes
Haha I was literally thinking the same thing. I cannot think of any reason I would need this feature unless it’s for some sort of random thing I add. Not sure why I would need to pull an elements dimensions?
Maybe a few interesting conditionals, but nothing I’d really use in my production app.
This is a very nice feature which would allow control over formatting in a way more granular than just looking at “Current page width”.
An example would be to say that a Group somewhere on a page that’s currently rendering below 320px wide should instead take up 100% of the width.
However, the implementation seems to have bugs for exactly this case, and so I’ve filed a bug report about it. @kathleen
5 Likes
Lovely!
Regarding use cases, I think this can work in subtle places such as iframes, tiny places where height conditions can be used to adjust responsive
Thanks
ZubairLK
3 Likes
This is an amazing update… with HUGE potential for more direct control over responsive designs (especially when using Reusable Elements, and has been a much requested feature here on the forum, and one I’ve been waiting for)…
@alxgrepe what exactly was the issue you’ve had here… in my case I’ve been able to successfully use this new feature to make conditional changes, including to an element’s width, based on the width of another element (I notice in your case you’re trying to change the element’s own width based on it’s own current width - so that might be the problem you’re having)…
@GH5T @cowontherun as others have pointed out, one of the main use cases here (using an element’s width) is going to be setting responsive behaviour based on an element’s width, rather than just the page width (which is very restrictive).
For example, the Old Responsive engine let you hide/show elements based on the parent group’s width, but this feature has been noticeably missing from the new responsive engine - until now (but now you can use ANY element’s width - not just the parent group or the page!!).
And as for getting an element’s height… there are plenty of situations where you need to know the rendered height of an element that contains dynamic content, in order to position another element, or make one appear (especially one that doesn’t sit on the page, such as a floating group) in the correct place. Previously you’d need to use some custom javascript for this (or a plugin), but now you can access element’s heights directly in vanilla Bubble, which simplifies a lot of cool design potential.
Now, it would be amazing if we could set dynamic widths and heights for elements (based on the heights and widths of other elements)…
3 Likes
You can use CSS to have dynamic changes to elements. Vanilla, without plugins.
All you need to do is have your CSS in a HTML Element and tag the element ID accordingly to access element properties dynamically.
You can even make changes animate by putting “property transitions” in that element.
Just remember to add the !important property so it doesn’t revert to your element’s default when you don’t want it to.
1 Like
@adamhholmes
The issue is to try to do what I did in my screenshot - set a group to a width but under a certain viewport (mobile) set width to something else like 100% - you get a nasty flicker/loop effect.
Cool! It works even if you change the width & height dynamically (via HTML style):
4 Likes
This is fantastic!
A great additional component to this is to add in the responsive tab the feature to show the element height and width the same way we can see the page width. It would be very very helpful to be able to click onto an element while in responsive tab and see that elements height and width since a major use case for the element width and height is for responsive design controls.
3 Likes
Noted! Very reasonable request
4 Likes
@nick.carroll @kathleen is there a way to add support for dynamic width/height too?
5 Likes
I agree with others that having a dynamic value for width and height would be incredible. @nick.carroll I would also like to request access to the elements current scrolling position. This will help a lot with understanding if an element is visible or not based on the page height.
4 Likes
Any possibility of opening up the ability to access the elements X/Y position?
I just submitted a plugin that does this. Should be available within the next few days given the weekend and need of support to approve it.
It also provides for a 3rd way to set width/height in that we can perform calculations.
Will update forum via a showcase page.
1 Like
Noted!
2 Likes
I find myself wanting this feature daily! It’s very hard to get an element’s current width and height in the responsive editor tab.
I actually have been requesting that feature since the first time I tested about 8 months ago. Seemed a bit strange that it was removed as the legacy responsive had it. Seemed to be some thinking about available space for the elements tree that was added in that resulted in those important details being removed.
1 Like