Twitter Bootstrap 3 Modal with Scrollable Body

Question

I am moving from Bootstrap 2 to Bootstrap 3. In the old version, I was using modals which had long content, and the modals automatically scrolled when a given max height was reached.

In Bootstrap 3, the modal just extends to show the entire content, and I have to use page down key to actually get to the end of it and see the buttons in the modal footer. I cannot use the scrollbar in the far right of the browser window, because it is covered by the backdrop, and in any case that would not be intuitive to scroll just the content in the modal box.

How can I achieve a modal in bootstrap 3 that automatically inserts a scrollbar to scroll content when a maximum height is reached?

I tried setting max height to the modal class, like this:

.modal{
   max-height:80%;
}
.modal-header{
   height:15% !important;    
}
.modal-body{
   height:70%;
   overflow:auto;
}
.modal-footer{
   height:15%;
}

But it doesn't work as expected. The modal window does reach a maximum size, but it just cuts its content there and the footer is not even displayed.

Thanks for any help.

Answer 1

You seem to be describing https://github.com/twbs/bootstrap/issues/14916 ("Modal overlay is above scrollbar "), which will be fixed in Bootstrap v3.3.1 by https://github.com/twbs/bootstrap/pull/14927 ("Fix modal backdrop overlaying the modal's scrollbar").

Answer 2

Just add:

.modal-content {
  height:250px;
  overflow:auto;
}

The height can of course be adapted to your personal needs.

Working Example

Update:

It's actually pretty easy. Just add:

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

to your css.

It uses vh and calc, which also happen to have a good browser support (IE9+).

This is based on this answer. Please read there for more detailed information, I won't copy his answer.

Working Example

Answer 3

If you have dynamic content this can be a pain. I used this to make sure it had the correct height and then it would scroll:

$('#modal').on('shown.bs.modal', function () {
  $('.modal-dialog').css('height', $('.modal-dialog').height() );
});

$('#modal').on('hidden.bs.modal', function () {
  $('.modal-dialog').css('height', 'auto');
});