Polymer 1.0 appears behind

Question

I am using the Polymer Starter Kit.

When I add a <paper-toast> element, it appears behind the <paper-drawer-panel> when I .show() it.

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

Answer 1

I faced this same problem and figured out what's happening.

If you're doing the same thing as me, then you've got your paper-toast somewhere inside the main section of the paper-drawer-panel. In which case, move the paper-toast outside the paper-drawer-panel.

What worked for me was adding my paper-toast in index.html just after the closing </paper-drawer-panel> tag.

In case you need to use a dynamic message (ie, the message content is determined in a custom element that's not available on index.html then you can set the text in your custom element as 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();
}

Answer 2

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