Topic: Modal's are hiding behind NavBar & SideBar
Expected behavior Modals covering the entire window
Actual behavior Modals are hiding behind NavBar & SideNav
Resources (screenshots, code snippets etc.)
The following CSS temporarily fixes the problem for me.
.modal.show {
z-index: 100000!important;
}
.modal-backdrop.show {
z-index: 100000!important;
}
Jakub Chmura staff commented 5 years ago
Thanks, for that. I'm happy that you solved this problem in your project.
But remember to delete these lines with the newest package, because we solved this problem and we will push our solution to the production on Monday.
Best, Kuba
Hi @schmidtfx, @truth,
Thank you very much for your feedback!
We already discovered this bug and it's fixed, but we publish fix in the closest release.
Best, Kuba
Issue occurs because of this commit: https://git.mdbootstrap.com/mdb/react/re-pro/commit/76d168b8f4611070b56ba1ff638d5704824bae1f
File: src/components/Popper/Popper.css
The following line causes issues with the modals.
.show {
z-index: 15;
}
truth free commented 5 years ago
I had just logged in to report this and see that I'm not the first to catch it. I was surprised to even find that styleInject() existed. Why are these styles not included in mdbreact/dist/css/mdb.css? Inside the JS is the wrong place given that the implementation requires importing bootstrap and mdb css files. I /do/ see that mdb.css appears to contain core styles, with each component's styles located adjacent to its component definition in the JS source, but with the use of full-featured /dist/ files, there's no improvement in package size, with the added annoyance of CSS bugs that aren't related to anything in a CSS file.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.23.0
- Device: MacBook
- Browser: Chrome
- OS: MacOS
- Provided sample code: No
- Provided link: No