Comments (12)
jpink
commented on July 1, 2024
1
And when <paper-toast id="toast"></paper-toast> is in <body> how can i get a reference to it inside a view?
Tried document.getElementById("toast").show('Where are you?'), but got "Uncaught TypeError: Cannot read property 'show' of null".
from paper-toast.
dotdoom
commented on July 1, 2024
1
@valdrinkoshi is it possible to use something similar to what PolymerElements/iron-overlay-behavior#86 does for dialogs?
Otherwise makes sense to add some explanation to the doc, e.g. "using paper-toast with app-header-layout requires toast to be on <body>, available via getElementById()". Happy to send PR for that.
from paper-toast.
valdrinkoshi
commented on July 1, 2024
Hi @mercmobily, what you're currently doing (putting the toast on body) is the right way to have the toast on top of everything.
The issue you're facing is caused by the way stacking context works: each overlay will be "trapped" into a parent's stacking context; in your case the drawer creates a stacking context that stays on top of the main content stacking context (which traps within it its content).
You can find more info in this related issue PolymerElements/paper-dialog#44 (comment).
from paper-toast.
mercmobily
commented on July 1, 2024
OK thanks...! So, paper-toast and modal dialogues should always be in <body> -- noted!
from paper-toast.
aeon3k
commented on July 1, 2024
@jpink did you find a solution ? I'm interested
from paper-toast.
jpink
commented on July 1, 2024
I got it working, but doesn't exactly remember how.
Anyway in custom-element the this.$.toast.show("doesn't work") but document.getElementById('toast').show('Works, if you call it after the custom-element is attached to the document.').
from paper-toast.
renfeng
commented on July 1, 2024
An element should not depend on another one that is not its child. In other words, getElementById() defeats the idea of web components.
A better solution is to use the property, fitInto. The drawback is that you'll have to control the height and width of the container.
https://www.webcomponents.org/element/PolymerElements/paper-toast/elements/paper-toast#property-fitInto
from paper-toast.
dotdoom
commented on July 1, 2024
@renfeng this sounds great. Do you have a working example with fitInto that works for the toast?
from paper-toast.
renfeng
commented on July 1, 2024
@dotdoom This should demonstrate the problem, and the idea of using fitInto, https://github.com/renfeng/paper-toast-issue-80
from paper-toast.
dotdoom
commented on July 1, 2024
@renfeng thanks (that's a great demo btw!), I understand what you mean now.
With this solution however, the toast appears inside the main container, instead of being above both the drawer and iron-pages. What I wanted is for toast to appear above all the elements on the page.
There are basically 3 UX problems that I see:
-
The toast hides immediately when switching pages. In a scenario when the user starts a long-running (seconds) operation and switches to another page, the user won't see the feedback (toast)
-
The toast is truncated on mobile devices if a drawer is opened, since a drawer may take way more than 50% of the screen
-
Subjectively, the toast attracts less attention, since it spans from a sub-component rather than the edge of the screen
Should we make an exception to the "idea of web components" for a global thing like toast?
from paper-toast.
renfeng
commented on July 1, 2024
Agreed - a new toast will auto close a previous one.
Toasts should be global, in other words, be placed in the top level as @valdrinkoshi said before.
A custom event can help us to keep the idea of web components.
from paper-toast.
renfeng
commented on July 1, 2024
Updated the demo with a global toast driven by customer events.
renfeng/paper-toast-issue-80@60eb9a4
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
- 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.