Comments (6)
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 inmain
we won't see it - when
drawer
is closed and we try to show the toast indrawer
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.
Related Issues (20)
- Hide then show toast HOT 5
- open() close() etc. methods HOT 1
- Allow custom styling for paper-toast HOT 2
- Toast remaining as invisible barrier in Chrome
- override resetFit rather than center
- paper-toast's alignment abilities is a lie. HOT 5
- The `paper-toast` element is hidden from drawer content on iPad with Safari HOT 4
- <paper-toast> is partially hidden by app-drawer HOT 12
- Pattern to create multiple toast HOT 2
- , HOT 2
- paper-toast doesn't support center alignment HOT 7
- paper-toast does not scroll correctly when fitInto is set. HOT 1
- Callback when toast closes HOT 1
- Button within toast falls out of alignment upon receiving keyboard focus. HOT 3
- Align button HOT 1
- noCancelOnOutsideClick is false but still not closes the toast on clicking on 'paper-tabs' area HOT 2
- this element doesn't appear in any collection webcomponents.org HOT 4
- Toast fitInto/fit-bottom not working correctly. HOT 5
- calling hide() function on paper-toast loses focus on paper-input inside paper-dialog HOT 5
- On-tap doesn't work on mobile HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from paper-toast.