Polymer fitInto paper-dialog show on top of drawer

Question

Just want to fit my paper-dialog inside the 'content' div of the starter kit polymer that it does not show on top of the drawer.

<paper-dialog opened modal fit-into="{{content}}">MY DIALOG</paper-dialog>

I try

ready: function() {
     this.content = Polymer.Base.$$('#content'); \\ null
}

and

Polymer.Base.$$('body').querySelector('#content')  \\ null
Polymer.Base.$$('body').getElementById('#content') \\ null
document.getElementById("#content")

I do not find a way to retrieve div from outside the shadow dom. It always return undefined or null. I only succeed to retrieve the body.

The content stand on the index.html which contain my custom element

<body> 
   ...
   <div id="content">

UPDATE:

After Kable answer the dialog fit nicely into my content div but the overlay of the modal still cover the whole page, on top of the drawer. I guess I can solve this by putting some z-index here and there but I wish to constraint the overlay to fit only into the container div?

Kable Kable · Accepted Answer · 2016-03-17T06:25:40

Firstly, you don't really need to use Polymer.Base.$$('body') to select the body, you could just use document.body.

Secondly, it's possible that the #content div isn't available when ready is called on your component. Try accessing it inside the attached function instead:

attached: function () {
    document.body.querySelector("#content");
}

If that still doesn't work try wrapping it in an async call:

attached: function () {
    this.async(function () {
        document.body.querySelector("#content");
    });
}

See https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#initialization-timing-for-siblings for why the async call may be necessary.

Polymer fitInto paper-dialog show on top of drawer

1 Answers