Comments (5)
valdrinkoshi
commented on July 19, 2024
1
@AlexNasonov that's expected to work like that, fitInto should fit the toast into the element.
If it's appearing behind the drawer, it's probably a stacking context issue. We recently updated the README.md with more info regarding these situations ->
<paper-toast> is affected by the stacking context of its container. Adding <paper-toast> inside elements that create a new stacking context - e.g. <app-drawer>, <app-layout> or <iron-list> - might result in toasts partially obstructed or clipped. Add <paper-toast> to the top level (<body>) element, outside the structure, e.g.:
<!-- ... -->
</app-drawer-layout>
<paper-toast id="toast"></paper-toast>
</template>You can then use custom events to communicate with it from within child components, using addEventListener and dispatchEvent.
from paper-toast.
valdrinkoshi
commented on July 19, 2024
hi @Boscop, it should work correctly when setting fitInto http://jsbin.com/namaza/1/edit?html,output
Are you sure it doesn't get set by some other component before it's fully opened? Can you check what's the value of fitInto from the devtools?
from paper-toast.
Boscop
commented on July 19, 2024
When the toast opened I right clicked on it, then 'inspect', and then in the console I typed $0.fitInto.
It showed the myform element: <form is="iron-form" id="myform" ...
The only place where I set fitInto is right before I open the toast.
Anything else I should try?
from paper-toast.
valdrinkoshi
commented on July 19, 2024
interesting...have you tried updating your dependencies? (e.g. latest version of paper-toast, iron-overlay-behavior etc)?
Also, can you try invoking $0.refit() from the devtools once the toast is open? That should force the recalc of the position for the toast.
from paper-toast.
AlexNasonov
commented on July 19, 2024
In my case FitInto opens toast in the bottom of the element, not the page.
Without FitInto it hides behind the app-drawer((
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
- 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.