Topic: Modal's are hiding behind NavBar & SideBar

schmidtfx free asked 3 years ago

Expected behavior Modals covering the entire window

Actual behavior Modals are hiding behind NavBar & SideNav

Resources (screenshots, code snippets etc.) Screenshot of Modal hiding behind NavBar

schmidtfx free answered 3 years ago

The following CSS temporarily fixes the problem for me. {
  z-index: 100000!important;
} {
  z-index: 100000!important;

Jakub Chmura staff commented 3 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

Jakub Chmura staff answered 3 years ago

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

schmidtfx free commented 3 years ago

Is there a temporary workaround?

schmidtfx free answered 3 years ago

Issue occurs because of this commit:

File: src/components/Popper/Popper.css

The following line causes issues with the modals.

.show {
  z-index: 15;

truth free commented 3 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.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: 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