search

PolymerElements / paper-dialog-scrollable

A scrollable area used in a Material Design dialog
15 stars 18 forks source link

paper-dialog-scrollable sized 0 if paper-dialog is created opened #13

Closed kungufli closed 8 years ago

kungufli commented 9 years ago

If the a paper-dialog is opened on page load (with the opened attrbiute or even opened programmatically calling the open() on WebComponentsReady) the paper-dialog-scrollable result of size 0, hiding all the included content.

Here a simple example:

<html>
  <head>
    <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
    <link rel="import" href="../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
  </head>
  <body class="fullbleed">
    <paper-dialog id="dialog" opened>
      <paper-dialog-scrollable>
        <div>Demo text</div>
      </paper-dialog-scrollable>
    </paper-dialog>
  </body>
</html>

Another example where the dialog if opened programmatically, with the same result:

<html>
  <head>
    <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
    <link rel="import" href="../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
  </head>
  <body class="fullbleed">
    <paper-dialog id="dialog">
      <paper-dialog-scrollable>
        <div>Demo text</div>
      </paper-dialog-scrollable>
    </paper-dialog>
  </body>

  <script>
    window.addEventListener('WebComponentsReady', function(e) {
      document.querySelector('#dialog').open();
    });
  </script>
</html>
jmsgomes commented 8 years ago

I ran into the same issue (which defeats the point of setting the opened attribute). For now, I am able to work around it by adding a ready event handler (instead of setting opened):

  ready: function() {
    this.async(function() {
      this.$.dialog.open();  // Assuming <paper-dialog id="dialog" ...>
    }, SOME_REASONABLE_TIME_IN_MILLIS);
  }
tigerhawkvok commented 8 years ago

Ah, I've just been enforcing a min-height on the paper dialog. This makes a lot of sense. Maybe this will fix the crapshoot of mobile issues I have ...