How to make modal scroll with main page

Question

I have a modal with the contents taller than the browser height, as a result I have some contents which cannot be displayed. (seems like the modal position is fixed and cannot be scrolled as a whole)

How can I make the modal scrollable with the main page so that I can actually view the contents below?

Solution 1

What you could do is set the modal's CSS position to absolute instead of fixed.

To do this, just get the class name of the modal or ID like this and set it to absolute:

.modal {
position: absolute !important;
}

Or, even better, edit the main CSS for your modal (if you can) and change the position from fixed to absolute.

jsFiddle example: http://jsfiddle.net/hUNZs/

Solution 2

I've tried <div class="modal myModal"></div>

CSS

.myModal {
      overflow: auto !important; 
      height: 300px; //set a height to a modal so it wont overlapped when the body tag's height is smaller than the modal
}

Comments

[Peter Wateber]

oops I forgot to read the "cannot be scrolled as a whole" part. sorry

[coreyward]

This appears to be the opposite of what he's looking for.

[Peter Wateber]

I've edited my answer... I also had this problem, and I concluded that when the body's height is taller than the modal's height the modal is scrollable (just an observation though)

[cbcram]

I've found also another nice and simple solution at stackoverflow.com/a/34897879/964919