How to set a scrollbar only for a modal body?

Question

I have the 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 a modal dialog like this, basically it puts a scrollbar around the whole modal-dialog and not the modal-body that contains the content I'm trying to display.

The image looks something like this:

How to get scrollbar only around modal-body ?

I tried to assign style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" for modal-body but this did not work.

Answer 1

You must set height for .modal-body and give it overflow-y: auto . Also reset .modal-dialog overflow to initial value.

See a working example:

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

Answer 2

If you only support IE 9 or higher, you can use this CSS, which will scale seamlessly to the size of the window. You may need to set up “200px,” though, depending on the height of your header or footer.

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

Answer 3

The problem was solved with the help of the @carlos calla and @jonathan marston harvester solutions.

  /* Important part */ .modal-dialog{ overflow-y: initial !important } .modal-body{ max-height: calc(100vh - 200px); overflow-y: auto; } 

Answer 4

Adding to Carlos Calla is a great answer.

You need to set the height of .modal-body, but you can use media queries to make sure that it matches the screen size.

 .modal-body{ height: 250px; overflow-y: auto; } @media (min-height: 500px) { .modal-body { height: 400px; } } @media (min-height: 800px) { .modal-body { height: 600px; } } 

Answer 5

Optional : If you do not want the modal window to exceed the height of the window and use the scroll bar in .modal-body, you can use this adaptive solution. See a working demo here: http://codepen.io/dimbslmh/full/mKfCc/

 function setModalMaxHeight(element) { this.$element = $(element); this.$content = this.$element.find('.modal-content'); var borderWidth = this.$content.outerHeight() - this.$content.innerHeight(); var dialogMargin = $(window).width() > 767 ? 60 : 20; var contentHeight = $(window).height() - (dialogMargin + borderWidth); var headerHeight = this.$element.find('.modal-header').outerHeight() || 0; var footerHeight = this.$element.find('.modal-footer').outerHeight() || 0; var maxHeight = contentHeight - (headerHeight + footerHeight); this.$content.css({ 'overflow': 'hidden' }); this.$element .find('.modal-body').css({ 'max-height': maxHeight, 'overflow-y': 'auto' }); } $('.modal').on('show.bs.modal', function() { $(this).show(); setModalMaxHeight(this); }); $(window).resize(function() { if ($('.modal.in').length != 0) { setModalMaxHeight($('.modal.in')); } }); 

Answer 6

I know this is an old topic, but it might help someone else.

I managed to scroll the body, fixing the position of the modal dialog element. And since I will never know the exact height of the browser window, I took the information that I was sure about, the height of the header and footer. Then I was able to make the upper and lower fields of the element of the modal body correspond to these heights. Then this led to what I was looking for. I threw the violin together to show my work.

also, if you want the full-screen dialog just to not comment on the width: auto; inside the .modal-dialog.full-screen section.

https://jsfiddle.net/lot224/znrktLej/

And here is the css that I used to change the bootstrap dialog.

 .modal-dialog.full-screen { position:fixed; //width:auto; // uncomment to make the width based on the left/right attributes. margin:auto; left:0px; right:0px; top:0px; bottom:0px; } .modal-dialog.full-screen .modal-content { position:absolute; left:10px; right:10px; top:10px; bottom:10px; } .modal-dialog.full-screen .modal-content .modal-header { height:55px; // adjust as needed. } .modal-dialog.full-screen .modal-content .modal-body { overflow-y: auto; position: absolute; top: 0; bottom: 0; left:0; right:0; margin-top: 55px; // .modal-header height margin-bottom: 80px; // .modal-footer height } .modal-dialog.full-screen .modal-content .modal-footer { height:80px; // adjust as needed. position:absolute; bottom:0; left:0; right:0; } 

Answer 7

Or easier, you can first install between your tags and then to the css class.

 <div style="height: 35px;overflow-y: auto;"> Some text o othre div scroll </div> 

Answer 8

For Bootstrap versions> = 4.3

Bootstrap 4.3 has added a new built-in scroll function to modules. This only scrolls the contents of the modal body if the size of the contents would otherwise make it scroll. To use it, simply add the modal-dialog-scrollable class to the same div that the modal-dialog class has.

Here is an example:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-scrollable" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> the<br>quick<br>brown<br>fox<br> the<br>quick<br>brown<br>fox<br> the<br>quick<br>brown<br>fox<br> the<br>quick<br>brown<br>fox<br> the<br>quick<br>brown<br>fox<br> the<br>quick<br>brown<br>fox<br> the<br>quick<br>brown<br>fox<br> the<br>quick<br>brown<br>fox<br> the<br>quick<br>brown<br>fox<br> the<br>quick<br>brown<br>fox<br> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 

Answer 9

 #scroll-wrap { max-height: 50vh; overflow-y: auto; } 

Using max-height with vh as the unit on modal-body or wrapper divs inside modal-body . This will automatically resize the modal-body or wrapper div (in this example) when the user resizes the window.

vh is a unit of length representing 1% of the size of the viewport for the height of the viewport.

Browser Compatibility Chart for vh .

Example: https://jsfiddle.net/q3xwr53f/

Answer 10

A simple js solution for setting modal height proportional to body height:

 $(document).ready(function () { $('head').append('<style type="text/css">.modal .modal-body {max-height: ' + ($('body').height() * .8) + 'px;overflow-y: auto;}.modal-open .modal{overflow-y: hidden !important;}</style>'); }); 

body height should be 100%:

 html, body { height: 100%; min-height: 100%; } 

I set the modal growth of the body to 80% of the body, this, of course, can be customized.

Hope this helps.

Answer 11

What worked for me is to set the height to 100% if there is an overflow on the car, I hope this helps

  <div style="height: 100%;overflow-y: auto;"> Some text o othre div scroll </div>