Polymer 1.0 <paper toast> appears behind the <paper panel>

I am using Polymer Starter Kit.

When I add an item <paper-toast>

, it appears behind <paper-drawer-panel>

when I add .show()


Has anyone else had this problem and do you have any ideas on how to fix it?


source share

2 answers

I faced this same problem and found out what was going on.

If you do the same as me, then you have paper-toast

it somewhere inside the section main


. In this case, move paper-toast

out paper-drawer-panel


What worked for me was adding mine paper-toast

in index.html

right after the closing tag </paper-drawer-panel>


If you need to use a dynamic message (i.e. the content of the message is defined in a custom element not available in index.html

, then you can set the text in your custom element as shown below.


    <!-- Your chest of drawers go here -->

<paper-toast id="somethingWentWrong"



<!-- Assuming of course that this is included in index.html -->
<p on-click="paragraphClicked">Click Me</p>

paragraphClicked: function() {
   var toast = document.querySelector('#somethingWentWrong');
   toast.text = 'Aaargh!';




You can set the z-index style for the paper toast to a suitable value like 10000. It even works with the paper toner element inside the web component



All Articles