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.

score 97 · Accepted Answer · edited May 23 '17 at 12:10

97

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

edited May 23 '17 at 12:10

Community

1
1

answered Nov 07 '14 at 18:55

Sebsemillia

9,366
2
55
70

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 Nov 07 '14 at 18:59
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. – Vero Nov 12 '14 at 23:07
3

For other people who are wondering what the ``212px`` mean, it's the height sum of the ``modal-header`` and ``modal-footer`` – Strawberry Aug 05 '15 at 03:25
1

If you happen to be using LESS and having problems with this, see https://stackoverflow.com/questions/11972084/less-aggressive-compilation-with-css3-calc. – bbodenmiller Nov 19 '16 at 10:26

score 3 · Answer 2 · answered Dec 02 '15 at 05:20

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

score 0 · Answer 3 · answered Nov 07 '14 at 19:11

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

Twitter Bootstrap 3 Modal with Scrollable Body

3 Answers3

Linked