Topic: Modal / Date-picker from a modal appears with scroll to the 1st modal
Expected behavior If a modal / date-picker is displaying after clicking a button / icon from a modal and if the height of the 1st appeared modal is higher than the 2nd appeared modal / date-picker, then the page can be scrolled fully to the height of 1st appeared modal . Actual behavior Once a modal / date-picker is appeared on the screen, then only the modal / date-picker should be scrollable. Not the page behind the modal / date-picker. Resources (screenshots, code snippets etc.) https://drive.google.com/open?id=1kEgphtaVnxjkDv8UTkI6LZknP7fuDmxe
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 8.0.0
- Device: Desktop
- Browser: Chrome, IE, Firefox
- OS: Windows, Mac
- Provided sample code: No
- Provided link: Yes
Arkadiusz Idzikowski staff commented 5 years ago
Thanks, we will take a closer look at those problems and see what we can do about that on our end. To disable main page scrolling when modal is open you can try to use these styles as a workaround for now:
body.modal-open { height: 100vh; overflow: hidden !important; padding-right: 15px; }
Revature Pro priority commented 5 years ago
Thanks @Arkadiusz Idzikowski for your reply. I've used the style you've given. But, it is not working. Can you look at the problem and resolve the issue as soon as possible?
Arkadiusz Idzikowski staff commented 5 years ago
We will discuss the second case with our design team to make sure that it should work this way for the nested modals. As for the first case, could you describe what exactly happens when you add the styles I provided? Did you add this rule to your global styles.scss file?
Revature Pro priority commented 5 years ago
Yes. I added the rule. But, the scroll for both the modals will be hidden.