Accessing an element's dimensions?

Ask us anything How do I?
1

I have a few cases in the app I’m working on where it would make my life considerably easier to be able to obtain an element’s dimensions (width and/or height) and use them as variables to set spacings/dimensions of other elements accordingly.

Is there any way to do this in WeWeb? I found this old thread that is ostensibly about the same question but unfortunately doesn’t provide a clear answer: Access Dimensions of Element set to Auto Height/Width

Thank you!

EDIT:

Here’s a concrete example to illustrate what I mean:

  • I have a top navbar that has a variable height (set to auto, dependent on the dimensions of child elements + padding). I don’t have a way to manually calculate that height.
  • I have a sidebar, the height of which should be equal to the height of the viewport minus the height of that top navbar, minus some (fixed) spacings.

How do I achieve that? I’m okay with a solution that uses JS, just not sure what that would be. Thanks!

2

This is quite simple. First you have to give your element an “id” name. Then enable “Advanced Interactions”. Then you have acces to component’s data under CONTEXT and Components Positions.

image
image610×664 66.2 KB

1 Like
3

Thank you! That’s exactly what I needed :slight_smile: