폴리머 토스트 엘리먼트 배치 방법

Question

폴리머 초기화 명령을 사용하고 app-drawer-template을 선택하여 생성 된 폴리머 앱을 작성하십시오. 다음과 같이 종이 toast.html에 연결된 내-view1.html에서는

및 템플릿과 스크립트를 수정 : 버튼을 클릭

<template> 
    <div class="card"> 
    <div class="circle">1</div> 
    <h1>View One</h1> 

    <button on-tap="handleTap">open</button> 

    <paper-toast id="toast0" text="This toast auto-closes after 3 seconds"></paper-toast> 

</div> 

</template> 

<script> 

Polymer({ 

    is: 'my-view1', 

    handleTap: function(){ 
    this.$.toast0.open(); 
    } 

    }); 

, 토스트가 나타나기는하지만 대부분의 메뉴 서랍 뒤에 나타나고 토스트 윈도우의 일부만 보입니다.

나는 CSS를 사용하여 축배를 중심으로하려했지만 작동하지 않습니다. Z- 인덱스 설정이 작동하지 않았습니다. 토스트 윈도우가 서랍 뒤에 숨어 있지 않도록 어떻게 배치 할 수 있습니까?

Answer 1

토스트 요소에 다음과 같은 CSS 클래스를 추가 :

.mytoast { 
    width: 100%; 
    text-align: right; 

} 

이제 토스트 창 페이지에 걸쳐 텍스트가 오른쪽 끝으로 정렬 보여줍니다.

Answer 2

다음 CSS도 문제를 해결할 수 있습니다.

paper-toast { 
    width: 300px; 
    margin-left: calc(50vw - 150px); 
}