ポリマー紙トースト要素の配置方法

Question

ポリマーinitコマンドを使用してapp-drawer-templateを選択して作成したポリマーアプリ。

<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(); 
    } 

    }); 

ボタンをクリックすると、トーストが表示されますが、ほとんどの：紙toast.htmlにリンクされ、次のようにテンプレートやスクリプトを修正私の-view1.htmlで

、メニュードロワの後ろに表示され、トーストウィンドウの一部だけが表示されます。

私はトーストをCSSで中心化しようとしましたが、動作しません。 z-indexを設定しても機能しませんでした。どのようにトースト・ウィンドウを配置して、ドロワーの後ろに隠れないようにすることができますか？

Answer 1

はトースト要素に以下のCSSクラスを追加しました：

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

} 

を今トーストウィンドウが右端に揃えページとテキストのショーにまたがります。

Answer 2

次のCSSもあなたの問題を解決できます。

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