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

css scroll
David Tuite picture David Tuite · May 7, 2012 · Viewed 174.8k times · Source

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

Amit Kumar Pawar picture Amit Kumar Pawar · Jan 20, 2016

just use 

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

it will arrange your modal and then give it an vertical scroll

Related questions

Prevent BODY from scrolling when a modal is opened

I want my body to stop scrolling when using the mousewheel while the Modal (from http://twitter.github.com/bootstrap) on my website is opened. I've tried to call the piece of javascript below when the modal is opened but …

Read More
Disable Scrolling on Body

I would like to disable scrolling on the HTML body completely. I have tried the following options: overflow: hidden; (not working, did not disable scrolling, it just hid the scrollbar) position: fixed; (this worked, but it scrolled completely to the …

Read More
How to programmatically disable page scrolling with jQuery

Using jQuery, I would like to disable scrolling of the body: My idea is to: Set body{ overflow: hidden;} Capture the current scrollTop();/scrollLeft() Bind to the body scroll event, set scrollTop/scrollLeft to the captured value. Is there a …

Read More