Getting width/height of an element on the panel UI

Adobe XD UXP Plugin API
, ,
1

Greetings everyone,

I’ve been updating our plugins for panel-focused versions, but I’m having some trouble getting some element’s characteristics throught javascript. What I intend to do is get the width/height of a certain div inside the panel UI. After studying a log of said element, I’m failing to find anything that could give me anything related to width. The main objective is being able to check wether that element is larger than it was when previously checked.

Thanks in advance :+1:

1 Like
2

You can listen for the resize event, after which all the element sizes will have been recalculated. Layout happens asynchronously in UXP, which means if you check the state too early, it’s possible to read back the incorrect value. If you wait for resize, you’ll have the correct data.

May I ask what the particular use case is here? Maybe there’s another way to do what you want.

2 Likes
3

This would be used as a way to verify if a certain font-family is installed or not (in this case, FontAwesome). I would have a div with a certain character, if it’s font-family was not installed, it would instead use the standard system font, ence representing the full word instead of an icon, increasing or decreasing the width of it’s parent element.

4

Gotcha. Creating a div or span, adding it to the DOM, and then waiting for resize should let you determine the size of the character.

1 Like
5

Thanks Kerri, I’ll try that route and let you know the outcome. :+1:

6

In the resize handler when you have the element what properties should be check to get the size?

7

There’s info on the event, but you can then check any of the typical properties on the element you would in a web page (e.g., getBoundingClientRect).

1 Like