Modal's are hiding behind NavBar & SideBar


Topic: Modal's are hiding behind NavBar & SideBar

schmidtfx pro premium asked 2 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 pro premium answered 2 years ago

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


Jakub Chmura staff premium answered 2 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 pro premium commented 2 years ago

Is there a temporary workaround?


schmidtfx pro premium answered 2 years ago

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 premium commented 2 years ago

@schmidtfx

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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: 4.23.0
  • Device: MacBook
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No