Subodh Nijsure Subodh Nijsure - 5 months ago 106
CSS Question

How to put scrollbar only for modal-body in bootstrap modal dialog

I have following element

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" >
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"></h3>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>


It shows modal dialog something like this, basically it puts scroll bar around entire modal-dialog and not modal-body that contains the content I am trying to display.

Image looks something like this - http://imgur.com/0ZZRjnJ

How do I get scrollbar around only modal-body?
I have tried to assign style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" to modal-body and that didn't work.

Answer

You have to set the height of the .modal-body in and give it overflow-y: auto. Also reset .modal-dialog overflow value to initial.

See the working sample:

http://www.bootply.com/T0yF2ZNTUd

.modal{
    display: block !important; /* I added this to see the modal, you don't need this */
}

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 250px;
    overflow-y: auto;
}
Comments