How make a Bootstrap modal with scrollable content and max height?

Question

I have a modal with a large content in it. So I want the modal be the max-hight of my window and the content should be scrollable within the modal.

This is what my modal is right now:

<div class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
      <h4 class="modal-title">Error Log: {{ log_name }}</h4>
    </div>
    <div class="modal-body">
      <pre>
        {{ log_content }}
      </pre>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-warning pull-left" ng-click="clear_log( )"><span class="glyphicon glyphicon-trash"></span></button>
      <button type="button" class="btn btn-default pull-left" ng-click="refresh_log( )"><span class="glyphicon glyphicon-refresh"></span></button>
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>
</div>

Thank you.

possible duplicate of [Twitter Bootstrap 3 Modal with Scrollable Body](http://stackoverflow.com/questions/26807524/twitter-bootstrap-3-modal-with-scrollable-body) — seenukarthi, Aug 13 '15 at 09:10
give a very high value to the max-height in css of the modal div like `max-height:10000px;` and give the `height:auto` and `overflow-y:scroll` — Sora, Aug 13 '15 at 09:13

Shehary · Accepted Answer · 2015-09-30T12:52:19.670

With pure CSS it's not possible, you can achieve the dynamic height of modal according to window size with following piece of script with suggested answer CSS in comments;

Script

$('#myModal').on('show.bs.modal', function () {
    $('pre').css('height',$( window ).height()*0.9);
});

CSS

.modal-body {
    overflow-y: auto;
}

Fiddle

Note: You have to adjust the height and may be the target class which you want to be with dynamic height, in example I target pre you can also try with $('.modal-body').css('height',$( window ).height()*0.9); which ever suits your need and according to design.

Or you can totally remove CSS suggested above and set the height in JS like as follow;

$('pre').css('height',$( window ).height()*0.6);

For Remote Modals

With remote modals above solutions will not work so with remote modals if you want to adjust the height of the selector e.g modal-body then following script and CSS can do the trick with bootstrap modal loaded event

$('#myModal').on('loaded.bs.modal', function () {
    $('pre').css('height',$( window ).height()*0.6); 
});

CSS

.modal-body {
    overflow-y: auto;
}

Bootstrap Modal events Functions

How make a Bootstrap modal with scrollable content and max height?

1 Answers1