맞춤 요소 상위 페이지를 기준으로 한 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>