Modal / Date-picker from a modal appears with scroll to the 1st modal


Topic: Modal / Date-picker from a modal appears with scroll to the 1st modal

Revature Pro priority asked 2 years ago

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


Arkadiusz Idzikowski staff commented 2 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 2 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 2 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 2 years ago

Yes. I added the rule. But, the scroll for both the modals will be hidden.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue
  • User: 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