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.

Solution 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

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

Comments

[Sebsemillia]

I updated my answer.

[Vero]

Thanks for replying. I tried it. It scrolls the header and footer of the modal also, I want the header and footer of the modal to remain visible at all times, as it was in bootstrap 2, and only scroll the content within. This also causes issues with modals that have less content since the modal still shows at the fixed height with white space at bottom.

[Vero]

Thank you! This worked great. I only used the code from the update, and I added overflow-x:hidden; to it to avoid a horizontal scrollbar in the popup.

[Strawberry]

For other people who are wondering what the 212px mean, it's the height sum of the modal-header and modal-footer

[bbodenmiller]

If you happen to be using LESS and having problems with this, see stackoverflow.com/questions/11972084/….