Modal: Does not center correctly on scrolled pages #8887
Comments
andybritton-info
changed the title
|
@andybritton-info noting for future dev that it works ok on https://main-enterprise.demo.design.infor.com/components/modal/test-body-scroll.html And perhaps that could help with a workaround until we get to it |
|
Ah yes - I see how that works in the demo now. thanks |
|
@andybritton-info @tmcconechy @ericangeles I managed to make it work by adding what was in layout.html: https://stackblitz.com/edit/stackblitz-starters-ibfjke?file=index.html |
|
@yohannahbautista, perhaps it is enough to note in documentation that the modal positions itself absolutely and relies on having a non-scrollable, positioned ancestor to anchor it. That said, it might make it more difficult when introducing the component into an existing project, as was the case for me. |
|
@yohannahbautista i agree maybe add a note in the docs and lets go with this. We have a lot of other items to address. |
|
Does that means we close with the stackblitz or let QA look at it? |
Describe the bug
When a modal is displayed on a scrolled page, it does not correctly center vertically.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The modal should be in the middle of the browser window, regardless of the scrolling position of the page.
Version
Screenshots
Platform
Additional context
Firstly, I note that the div.modal-page-container is positioned relative to the initial containing block rather than the viewport.
Overriding the above with:
... results in a correctly centered modal regardless of page scroll position:
The above explains the behavior but I don't know if it's good enough to propose as a fix.
Secondly, I note that this only really came to light because I had a modal with no 'focusable' controls on it and a page that was twice the height of the viewport. As long as there is a focusable control, and as long as the modal code correctly identifies it and executes .focus against it, then the browser will scroll the control (and often the entire modal) back into view. In my case, I had a modal where the only focusable controls where the buttons on the .modal-buttonset, but I had these disabled at the point the modal was being displayed. The modal code was incorrectly trying to focus one of these buttons, but as they were disabled, the browser ignored the event and did not scroll the page to bring the modal into view.
The text was updated successfully, but these errors were encountered: