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.

Custom modal with position absolute is overlapping Toast

See original GitHub issue

Describe the bug I have a custom modal with absolute position and z-index: 9999. The issue is that the Toast is under the modal.

Steps to reproduce Steps to reproduce the behavior:

  1. Configure any Toast
  2. Create a fullscreen modal on the same level with position: absolute and z-index: 9999
  3. Try to show a Toast message

Expected behavior The Toast component should be visible

Code sample It’s a simple issue, so I won’t provide you with a sample.

Environment (please complete the following information):

    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-4570S CPU @ 2.90GHz
    Memory: 65.77 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
    Platforms: iOS 14.2
    react: 17.0.2
    react-native: 0.66.3

Additional context I would really like to have the possibility to change the styles of AnimatedContainer component. A custom prop for z-index isn’t a good idea. Maybe there will be other issues that will need some other tweaks of the styles.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

calintamascommented, Dec 18, 2021

I assume you render your absolute positioned <View /> conditionally based on some isVisible state. In that case, <Toast /> instance refs are tracked internally and cleaned up on unmount.

calintamascommented, Dec 18, 2021

You can follow this guide - How to show the Toast inside a Modal?

Read more comments on GitHub >

github_iconTop Results From Across the Web

toast notification over 'overlay' - Stack Overflow
Toaster has id toast-container which has z-index 999999. So in order to move overlay below toastr, set z-index below 999999.
Read more >
Toast is overlapped by the layout-topbar - PrimeFaces forum
Ok, I looked into the documentation to find the answer. AND I think I've found the bug of Serenity: /src/App.scss: /* Custom toast...
Read more >
4 reasons your z-index isn't working (and how to fix it)
Solution: Move the modal outside of the content parent, and into the main stacking context of the page. The corrected markup would then...
Read more >
Toasts · Bootstrap v5.0
Toasts are lightweight notifications designed to mimic the push notifications that have been popularized ... Place toasts with custom CSS as you need...
Read more >
Stacking overlapping views with zIndex in Expo and React ...
You can even make the component extend outside of the parent's visual bounds. Position absolute bounds.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found