How to enable scrolling content inside a Bootstrap

Question

I'm trying to fit a lot of text into a modal box created using Twitter Bootstrap but I'm having a problem: the 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 scrolling.

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

Answer 1

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.

Answer 2

Set height for modal-body and not for the whole modal to get a perfect scroll on modal overlay. I get it work like this:

.MyModal {
    height: 450px;
    overflow-y: auto;
}

Here you can set height as per your requirements.

Answer 3

Solution 1: You can declare .modal{ overflow-y:auto} or .modal-open .modal{ overflow-y:auto} if you are using below 3v of bootstrap (for upper versions it is already declared).

Bootstrap adds modal-open class to body in order to remove scrollbars in case modal is shown, but does not add any class to html which also can have scrollbars, as a result the scrollbar of html sometimes can be visible too, to remove it you have to set modal show/hide events and add/remove overflow:hidden on html. Here how to do this.

$('.modal').on('hidden.bs.modal', function () {
   $('html').css('overflow','auto');
}).on('shown.bs.modal', function () {
   $('html').css('overflow','hidden');
});

---

Solution 2: As modal has functionality keys, the best way to handle this is to fix height of or even better connect the height of modal with height of the viewport like this -

.modal-body {
     overflow:auto; 
     max-height: 65vh;
}

With this method you also do not have to handle body and html scrollbars.

Note 1: Browser support for vh units.

Note 2: As it is proposed above. If you change .modal{position:fixed} to .modal{position:absolute}, but in case page has more height than modal user can scroll too much up and modal will disappear from viewport, this is not good for user experience.