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 rea

Answer 1

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 2

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');
});

Answer 3

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").