Question

使用polymer init命令创建Polymer应用程序并选择app-drawer-template。

在my-view1.html中，链接到paper-toast.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();
  }

  });

单击该按钮时，将显示Toast，但大部分都显示在菜单抽屉后面，并且只有部分Toast窗口可见。

我尝试使用css将吐司居中，但它不起作用。设置z-index也不起作用。如何定位吐司窗口，使其不会隐藏在抽屉后面？

Answer 1

以下css也可以解决您的问题。

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

Answer 2

在toast元素中添加了以下css类：

<md-button>
   Next
   <i class="material-icons right arrow-forward"></i>
</md-button>

现在吐司窗口跨越页面，文本显示与右端对齐。

如何定位聚合物纸 - 吐司元素

2 个答案: