カスタム要素Polymerダイアログのサイズ/位置は親ページに基づいて

Question

Polymerダイアログを再生し始めたばかりです。私は、カスタム要素のポリマーダイアログを作成して紙カードに使用しようとします。しかし、ダイアログはページ全体ではなく紙のカードのサイズ/位置に基づいて表示されるので、私は問題に直面しました。

ダイアログのサイズや位置がカードの代わりにメインページになるようにスタイルを設定するにはどうすればよいですか？ありがとうございました。

Main page, paper-card is a 100x100px card: 
 
<paper-card> 
 
Text 
 
<my-custom-dialog></my-custom-dialog> 
 
</paper-card> 
 

 
My-custom-dialog: 
 
<dom-module id="my-custom-dialog"> 
 

 

 
    <style is="custom-style"> 
 

 
     paper-dialog { 
 
      position: absolute; 
 
      top: 3%; 
 
      left: 0px; 
 
      margin-top: 0px; 
 
      width: 100%; 
 
      height: 100%; 
 
      overflow: auto; 
 
      z-index: 1; 
 
     } 
 
     
 
     .fa-times { 
 
      cursor: pointer 
 
     } 
 
    </style> 
 

 

 
    <template> 
 

 
     <i class="fa fa-object-group" aria-hidden="true" on-tap="toggleDialog"></i> 
 

 
     <paper-dialog id="dialog" always-ontop entry-animation="scale-up-animation" exit-animation="fade-out-animation"> 
 
      <div class="buttons"> 
 
       <i class="fa fa-times" aria-hidden="true" dialog-confirm></i> 
 
      </div> 
 

 
      <strong>Text here</strong> 
 
      
 
      
 
     </paper-dialog> 
 

 
    </template> 
 

 
</dom-module> 
 

 
<script> 
 
    Polymer({ 
 
     is: "my-custom-dialog", 
 
     toggleDialog: function() { 
 
      this.$.dialog.toggle(); 
 
     }, 
 

 
    }) 
 
</script>

Answer 1

BartKoppelmans正しいです。紙のダイアログは紙のカードの外にある必要があります。それでもボタンをカードの中に入れておくことができます。

<template> 
    <paper-card style="width: 50%;"> 
    <i class="fa fa-object-group" aria-hidden="true" on-tap="toggleDialog">?</i> 
    </paper-card> 
    <paper-dialog id="dialog" always-ontop auto-fit-on-attach entry-animation="scale-up-animation" exit-animation="fade-out-animation"> 
     <div class="buttons"> 
      <i class="fa fa-times" aria-hidden="true" dialog-confirm></i> 
     </div> 
     <strong>Text here</strong> 
    </paper-dialog> 

</template>