Modal's are hiding behind NavBar & SideBar

web
mobile

Topic: Modal's are hiding behind NavBar & SideBar

schmidtfx pro premium asked 4 months 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 4 months 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 pro premium commented 4 months 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 4 months 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 4 months ago

Is there a temporary workaround?


schmidtfx pro premium answered 4 months 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 4 months 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: React
  • MDB Version: 4.23.0
  • Device: MacBook
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No