How to enable scrolling of content inside a modal?

I'm trying to fit a lot of text into a modal box created using Twitter Bootstrap, but I'm having a problem: that content refuses to scroll.

I tried adding overflow:scroll and overflow-y:scroll, but to no avail; that merely causes it to display a scroll bar without actually enabling the scrolling.

What's the cause behind that and what can I do?

Solution 1:

In Bootstrap.css change the background attribute (position) of Modal from fixed to absolute

Solution 2:

In Bootstrap 3 you have to change the css class .modal

before (bootstrap default) :

.modal {

    overflow-y: auto;
}

after (after you edit it):

.modal {

    overflow-y: scroll;
}

Solution 3:

This answer actually has two parts, a UX warning, and an actual solution.

UX Warning

If your modal contains so much that it needs to scroll, ask yourself if you should be using a modal at all. The size of the bootstrap modal by default is a pretty good constraint on how much visual information should fit. Depending on what you're making, you may instead want to opt for a new page or a wizard.

Actual Solution

Is here: http://jsfiddle.net/ajkochanowicz/YDjsE/2/

This solution will also allow you to change the height of .modal and have the .modal-body take up the remaining space with a vertical scrollbar if necessary.

UPDATE

Note that in Bootstrap 3, the modal has been refactored to better handle overflowing content. You'll be able to scroll the modal itself up and down as it flows under the viewport.