Measure width and height of Html element in Dart

Question

I would like to know the exact size of an element without margin, border and padding, just the width and height of the most inner box (see image below).

Currently i'm aware of the function "getBoundingClientRect" which gives the size including border and padding. There is also the "client" property which returns a Rect including the padding.

So the question is, how do i get the width and height without padding?

Answer 1

Unfortunately the DOM does not provide such functionality. That's why most libraries like jQuery, ExtJS, etc. provide helper methods. They essentially parse the style and figure it out.

Here's an example:

<div style="width: 100px; height: 100px; padding: 5px; border: 1px solid #000"></div>

int getWidth(Element element) {
  var paddingLeft = element.style.paddingLeft.replaceAll('px', ''); // You may want to deal with different units.
  var paddingRight = element.style.paddingLeft.replaceAll('px', '');

  return element.clientWidth - int.parse(paddingLeft) - int.parse(paddingRight);
}

And the usage:

print(getWidth(query('#test')));

Result:

100

Notes:

• You might consider dealing with different types of units (px, pt, em, ...).
• The box-sizing property also has an effect you might want to check for.

If I or you happen to find the time, perhaps release a Pub package or something. :)

Answer 2

This pub package can predict the size of a text (without margin, border and padding) that does not yet exist in the DOM: https://pub.dartlang.org/packages/textent