CODEWITHSUNDEEP
polymer
Tyler
Tyler

Reputation: 18187

domReady vs ready - Migrating to Polymer 1.0

In Polymer0.5, I had the following code:

Template:

<div class="scroll">
    <div class="content">
        <content></content>
    </div>
</div>

Script:

domReady: function() {
    var width = $(this.shadowRoot).find('.content')[0].scrollWidth;
}

This code worked, and I received a non-zero value for the width.

Now I am trying to migrate to Polymer1.0, I added an ID to the div:

<div class="scroll">
    <div id="content" class="content">
        <content></content>
    </div>
</div>

And the script is now:

ready: function() {
    var width = this.$.content.scrollWidth;
}

However, this width is 0.

Is there a difference between the old domReady function, and the new ready function? I have also tried using the attached function but it did not work either.

When I try to access the width later on (triggered by a button press), then I get the non-zero value I am looking for.

The element is used like this:

<my-scrollbar>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam purus leo, sagittis lobortis velit vel, viverra vulputate purus. Proin lacinia magna eu erat iaculis, eget mollis lectus mattis. 
</my-scrollbar>

So that inner text is what determines the dimensions of the element.

Upvotes: 2

Views: 4260

Answers (2)

Zikes
Zikes

Reputation: 5886

An alternative is to "flush" the DOM before working with it. In this case, the code would be:

attached: function() {
  var width;
  Polymer.dom.flush();
  width = this.$.content.scrollWidth;
},

Since this is synchronous, declarative, and doesn't involve closures, it could be easier to work with.

More information: https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#dom-api

Upvotes: 3

Tyler
Tyler

Reputation: 18187

It turns out that my original code was working in Safari, but not in Chrome.

With Zikes suggestion, I added in some async, and now it works in both browsers.

Final answer:

attached: function() {
    this.async(function(){
        var width = this.$.content.scrollWidth;
    },1)
}

Upvotes: 6

Related Questions