wrap paper-dialog-scrollable with another div

Question

I am trying to use paper-dialog-scrollable inside paper-dialog but with scrollable wrapped by div

example code:

<paper-dialog>
  <div>
    <div class="loading">Loading</div>
    <paper-dialog-scrolalble> ...dynamic long content... </paper-dialog-scrollable>
  </div>
</paper-dialog>

I am loading content with AJAX so it is expected that there will be some loading screen. Using div.loading inside paper-dialog-scrollable is nonsense because user can scroll through content and loading overlay will be scrolled away (using absolute position). So I had to wrap it in another div which will have height of child and so I can use absolute position on loading div.

The problem is that paper-dialog-scrollable is no longer working. It's height is about 60px. So i went to documentation, found that there is a property called dialogElement and I set this property do a reference to paper-dialog. Nothing happend

The solution is to go to the paper-dialog-scrollable.html and inside function rewrite this.dialogElement = this.dialogElement || this.parentElement; to this.dialogElement = this.dialogElement || this.parentElement.parentElement;

But this is really soo hacky and I should check first parentElement if it has needed behaviors and then parentElement.parentElement... This is not what I want to do.. editing source code. This is all about timing. If you set property dialogElement before function _ensureTarget is called for the first time, it will work.

To make it work, you have to have setted dialogElement before attached or ready functions inside paper-dialog-scrollable are called. But there is no way ho to achiev this. Because even attached inside my own element is already too late...

From docs:

If paper-dialog-scrollable is not a direct child of the element implementing Polymer.PaperDialogBehavior, remember to set the dialogElement:

<script> var scrollable = Polymer.dom(myDialog).querySelector('paper-dialog-scrollable'); scrollable.dialogElement = myDialog; </script>

Like WTF Polymer team? I am using shadow dom.. How am I able to access myDialog when it is like twenty times nested inside shadow roots?

Is there any solution to this timing puzzle?

I am using paper-dialog version 2.0.1

and paper-dialog-scrollable version 2.1.0

Thanks

HakanC HakanC · Accepted Answer · 2018-04-21T15:44:08

If you like to change size of your paper-dialog size and paper-dialog-scrollable element. Just remove the outer div and limit the scrollTarget's width/height through the mixin paper-dialog-scrollable:

 paper-dialog paper-dialog-scrollable {
    --paper-dialog-scrollable: {
      box-sizing: border-box;
      width: 60px;
      height: 60px;
    }
  }

wrap paper-dialog-scrollable with another div

1 Answers