CODEWITHSUNDEEP
javascriptcssangularjstwitter-bootstrap-3bootstrap-modal
dab0bby
dab0bby

Reputation: 3001

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

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.

Upvotes: 1

Views: 4754

Answers (1)

Shehary
Shehary

Reputation: 9992

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

Upvotes: 1

Related Questions