Topic: Modal's are hiding behind NavBar & SideBar

schmidtfx free asked 4 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 4 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 commented 4 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


Jakub Chmura staff answered 4 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 4 years ago

Is there a temporary workaround?


schmidtfx free answered 4 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 free commented 4 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.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • 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