Home Ask Login Register

Developers Planet

Your answer is one click away!

TastyCatFood February 2016

Is there outerWidth height equivalent in dart( border, margine, padding inclusive element size)

I would like to find the border, margin and padding inclusive size of an element. jquery's outerWidth, outerHeight methods equivalent.

Currently, I'm using a silly code like below.
What is the real solution?


Neither the code I originally posted, that rounded the width and height, or marginEdge do the trick. Browsers uses the precision of double to draw elements and there sometimes the difference of 21px and 20.6px matters.


getBoundingClientRect() seems to returns border and padding inclusive size, commented lines involving those out and added to toDouble() to avoid int is not a subclass of double error.
Revised code:

Rectangle outerRect(HtmlElement e,[bool include_margin = false]) {
  HtmlElement c = e.clone(true);
    ..display = 'absolate'
    ..top = '-1000000px';
  var r = c.getBoundingClientRect();
  //rounding down causes troubles downstream
  //r.width can return int then,
  // int cannot be assigned to double
  double width = r.width.toDouble();
  double height = r.height.toDouble();
  int parse(String s){
    if(s == '') return 0;
      var m = new RegExp('[0-9]+').firstMatch(s);
      if(m == null) return 0;
      return int.parse(m.group(0));
    throw "Unexpected string ${s}";
  var s = c.style;
  if(include_margin) {
    width += parse(s.marginRight);
    width += parse(s.marginLeft);
//  width += parse(s.paddingLeft);
//  width += parse(s.paddingRight);

    height += parse(s.marginTop);
    height += parse(s.marginBottom);
//  height += parse(s.paddingBottom);
//  height += parse(s.paddingTop);

//  height += parse(s.borderTop);
//  height += parse(s.borderBottom);
//  height += parse(s.paddingBottom);
//  height += parse(s.paddingTop);
  r = new Rectangle(-1,-1,width,height);
  return r;


Alan Knight February 2016

Not really sure, but isn't that what marginEdge on the Element gives you?

Post Status

Asked in February 2016
Viewed 1,508 times
Voted 10
Answered 1 times


Leave an answer

Quote of the day: live life