Toast shows behind modal
See original GitHub issueI’m using a modal, with a zIndex of 1000. I have a toast as follows:
toast.error(errorMessage, {
zIndex: 9999,
hideProgressBar: true,
autoClose: 2000,
position: toast.POSITION.TOP_CENTER,
});
However, the toast shows behind the modal:
The component hierarchy is:
<Toaster>
<RootContainer />
</Toaster>
The <Toaster /> component is just a wrapper for <ToastContainer />.
The modal is opened in the <RootContainer />.
Issue Analytics
- State:
- Created 6 years ago
- Comments:9 (2 by maintainers)
Top Results From Across the Web
ngToast message is displaying behind the modal popup
Bootstrap modal has a z-index of 1040, so anything above that should make the toast message appear over the modal.
Read more >How to show lightning toast on top of modal (quick action)?
Show activity on this post. You can use the lightning:notificationsLibrary and put a notice up over your modal. It's not the same as...
Read more >How I Can show Toast Message Inside Dialog Or above Dialog?
Toast shown over the dialog overlay.
Read more >Toasts - Bootstrap
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. Toasts are lightweight notifications designed to mimic ...
Read more >[#MDL-70866] Toast is display underneath the modals
btw only changing the z-index of the toast is not enough. If there is a toast on the screen at the moment when...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Add this piece of code to fix it
.Toastify__toast-container { z-index: 200000; }
I have same problem in modals created by react portal