Clever Geek Handbook

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

it.

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

+3


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

paper-drawer-panel

. 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.



index.html

<paper-drawer-panel>
    <!-- Your chest of drawers go here -->
</paper-drawer-panel>

<paper-toast id="somethingWentWrong"
             duration="6000">
</paper-toast>

elsewhere.html

<!-- 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!';
   toast.show();
}
+4


source


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



+1


source






More articles:


All Articles