fit class doesn't get added if element is initially hidden (usually happens with dialog)

[wuxiaoying]

Dialogs are usually initialized with display: none since they aren't opened. When the paper-dialog-scrollable element is inside the dialog, it hits the below line in attached and sees that the offset height is 0 and doesn't add the fit class when it should.

requestAnimationFrame(function() {
        if (this.offsetHeight > 0) {
          this.$.scrollable.classList.add('fit');
        }
        this._scroll();
      }.bind(this));

[morethanreal]

What's the use case that exhibits this problem? If using this in a <paper-dialog>, the scrollable is sized by the dialog instead of fitting.

[wuxiaoying]

I see, I didn't know that the scrollable was sized by the dialog (I see that it works in the paper dialog demo). However, the paper-dialog-scrollable still isn't sizing in the dialog I have. Is it possible for you to point out where the sizing happens? Thanks!

Edit: Also, just a bit more information on the dialog I'm using... It's a dialog that contains a list that isn't immediately loaded. If I don't have a size on the dialog then the top is centered when I open the dialog, and the list overflows off of the page (I didn't find a re-position method, although there might be one somewhere?). I then gave the dialog a percentage height to avoid this issue. However, now the paper-dialog-scrollable has the right size, but the scroller inside it doesn't (if i add the class fit to it, then it works).

[morethanreal]

This element is meant to be used inside a <paper-dialog> or other Polymer.PaperDialogBehavior implementations, and using it in other dialog implementations is not supported. You can manually add the fit class to it if that helps with your use case.

[wuxiaoying]

The dialog I'm using is a Polymer.PaperDialogBehavior implementation, but I will just manually add the fit class. Thanks!

[01es]

I have a similar problem whereby the dialog appears squashed vertically, showing only the panel with Ok/Cancel buttons. Commenting out this.$.scrollable.classList.add('fit'); in requestAnimationFrame results in the correct behaviour. Unfortunately, assigning fit did not do any good at all.

@wuxiaoying Was the problem fixed in your case?