David Tuite David Tuite - 2 months ago 33
CSS Question

How to scroll the page when a modal dialog is longer than the screen?

I have a modal dialog in my app which can get quite long in the y direction. This introduces a problem whereby some of the content of the dialog is hidden off the bottom of the page.

enter image description here

I would like the window scrollbar to scroll the dialog when it is displayed and too long to fit on the screen but leave the main body in place behind the modal. If you use Trello then you know what I'm going for.

Is this possible without using JavaScript to control the scrollbar?

Here is the CSS I have applied to my modal and dialog so far:

body.blocked {
overflow: hidden;
}

.modal-screen {
background: #717174;
position: fixed;
overflow: hidden;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.9;
z-index: 50;
}

.dialog {
background: #fff;
position: fixed;
padding: 12px;
top: 20%;
left: 50%;
z-index: 10000;
border-radius: 5px;
box-shadow: 0, 0, 8px, #111;
}

Answer

In the end I had had to make changes to the content of the page behind the modal screen to ensure that it never got long enough to scroll the page.

Once I did that, the problems I encountered when applying position: absolute to the dialog were resolved as the user could no longer scroll down the page.

Comments