Get the width of custom element created using in dart?

Question

How do I get the width of a custom element from the element's script?

<polymer-element name="his-elem">
  <div>
    blah
  </div>
</polymer-element>

@CustomTag('his-elem')
class blah extends PolymerElement {

  @override
  void attached() {
    // how do I get the <his-elem>'s width (just width, no padding border stuff) here?
    // document.querySelector('his-elem').getComputedStyle().width gives me "auto"...
  }

}

Update

Add :host {display: block;} to his-element, then you can get the actual width via <his-elem>.clientWidth.

Günter Zöchbauer · Answer 1 · 2015-09-30T09:15:08.280

I use this when the other methods don't work:

this.getBoundingClientRect().width

See also https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect

**In Polymer <= 0.16

you need to call super.attached() previously

  @override
  void attached() {
    super.attached();
    print(this.getBoundingClientRect().width);
    // or 
    print(this.getComputedStyle().width);
  }

before the call to super.attached() the element isn't yet attached to the DOM and won't return a proper width. Actually with overriding attached and not calling super.attached() within the method you prevent attaching.

Could you add a little mortar to this brick-only answer? – Werner Dec 30 '14 at 17:10 — Werner, Dec 30 '14 at 17:10

score 1 · Answer 2 · answered Dec 22 '14 at 13:16

1

this represents the html element itself. So it should be this.style.width.

answered Dec 22 '14 at 13:16

Gérald Reinhart

3,101
1
13
14

It's empty, and `this.clientWidth` gives 0. – Not an ID Dec 22 '14 at 13:22
what returns this.getComputedStyle().width – Günter Zöchbauer Dec 22 '14 at 14:12
@GünterZöchbauer It's also "auto". – Not an ID Dec 30 '14 at 12:52
@NotanID you have to call this method inside `domReady` callback. – Andrei Stalbe Apr 14 '15 at 15:59

Get the width of custom element created using in dart?

2 Answers2