Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Toast shows behind modal

See original GitHub issue

I’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 GitHub Comments

12reactions

gvsakhilcommented, Oct 23, 2020

Add this piece of code to fix it

.Toastify__toast-container { z-index: 200000; }

8reactions

mortezashojaeicommented, Aug 10, 2020

I have same problem in modals created by react portal

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.

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...

How I Can show Toast Message Inside Dialog Or above Dialog?

Toast shown over the dialog overlay.

Toasts - Bootstrap

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. Toasts are lightweight notifications designed to mimic ...

[#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...