Search code examples
polymershady-dom

Polymer paper-dialog - set size to full viewport in shady dom? Also, does this old article apply to shady dom?

I am using Poylmer 1.0, but I still read https://www.polymer-project.org/0.5/articles/styling-elements.html#cat. Does anyone know if the same logic applies to Shady dom?

I really like the way https://events.google.com/io2015/ did their video. It uses paper-dialog to display the video and takes the full viewport.

I am trouble making paper-dialog take the full viewport. As shown in the image, I can't seem to force it. I have tried top: 0px; bottom 0px; left: 0px, right: 0px but this will break the behavior. fit gives me the closest look you see in the image so far. 

  <paper-dialog class="video-dialog fit">
   <div class="layout horizontal">
    <paper-button dialog-dismiss>
      <paper-icon-button icon="arrow-back"></paper-icon-button>
    </paper-button>
  </div>
    <div style="height: 100%; width: 100%">
      <google-youtube style="height: 100%;"
        video-id="YMWd7QnXY8E"
        rel="1"
        start="5"
        playsinline="0"
        controls="2"
        showinfo="0"
        width="100%"
        height="100%"
        autoplay="1">
      </google-youtube>
  </paper-dialog>

Questions, please:

  1. Just to confirm, all the children of paper-dialog are in the light dom, correct?

  2. To make the paper-dialog fill the view port like it was done in https://events.google.com/io2015/, do I need to access the shady dom with /deep/ or ::shady to do this? It seems that <paper-dialog class="fit"> would of done this.

enter image description here

Solution

  • Figured it out....looked at the source code and found margin attribute there....I just changed it to 0px;