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


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

Revature Pro pro priority vip early access asked a year 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 a year 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 pro priority vip early access commented a year 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 a year 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 pro priority vip early access commented a year ago

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


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.0.0
  • Device: Desktop
  • Browser: Chrome, IE, Firefox
  • OS: Windows, Mac
  • Provided sample code: No
  • Provided link: Yes