paper-toast appears behind nav drawer. about paper-toast HOT 6 CLOSED

I observed the same behavior but strangely enough only in Chrome. It works in Safari 8.0.6 and Firefox 37.0.1.

from paper-toast.

Fix with:

paper-toast {
    z-index: 9999;
}

from paper-toast.

Looks like the workaround by @Mygod only partly fixes the issue. If the toast is triggered in an attached lifecycle callback, it will only display for a fractional second duration - well short of the 3000 millisecond default duration.

from paper-toast.

Hi,
paper-drawer-panel will filter out anything that is not in drawer or main, so make sure the toast is either outside the paper-drawer-panel or within drawer or main:

<!-- won't display -->
<paper-drawer-panel>
  <div drawer>
    <paper-button raised onclick="document.querySelector('#toast0').show()">Show toast 0</paper-button>
  </div>
  <div main>
    Main
  </div>
  <paper-toast id="toast0" text="toast0"></paper-toast>
</paper-drawer-panel>

<!-- will display! -->
<paper-drawer-panel>
  <div drawer>
    <paper-button raised onclick="document.querySelector('#toast1').show()">Show toast 1</paper-button>
    <paper-toast id="toast1" text="toast1"></paper-toast>
  </div>
  <div main>
    Main
  </div>
</paper-drawer-panel>

There is still an issue if the toast is put inside main: the toast will be cropped. This is being solved in PR #36

from paper-toast.

@valdrinkoshi Exactly the same problem reproduced with latest Chrome and Firefox. Can you reopen?

from paper-toast.

I've tested with drawer panel as done in #14 (comment), se repro here http://jsbin.com/lopapi/6/edit?html,output (resize window to trigger the hiding of the drawer):

• when drawer is opened and we try to show the toast in main we won't see it
• when drawer is closed and we try to show the toast in drawer we won't see it
• we always see the toast outside drawer-panel

This is due to how stacking context works: both drawer and main create their own stacking context and trap all the content within it. The stacking context of main is below the one of drawer. When main or drawer are hidden (display: none) they hide all their content too.

The solution is to distribute overlays in the topmost stacking context, in this case outside paper-drawer-panel.

Since it is a composition problem, there is not much paper-toast can do about it.

from paper-toast.