Set Bootstrap modal content to scroll if height exceeds browser

Question

I have seen so many people asking about this, but no real solid reliable answer.

If the height of the modal exceeds the browser's inner height, I want the red-bordered Div to have a scroll bar to keep the modal within the browser view.

#scrollbox {
  border: 1px solid red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<input type="button" data-toggle="modal" data-target="#myModal" value="Launch Modal">

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        Hello, below is some text in a div that should start scrolling if the height of the modal exceeds the browser.
        
        <p><div id="scrollbox">
          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>
    </div>
  </div>
</div>

Cave Johnson · Accepted Answer · 2019-05-17T01:41:29.610

For Bootstrap versions >= 4.3

Bootstrap 4.3 added new scroll feature to modals. This makes only the modal-body content scroll if the size of the content would make the page scroll. This might not work for the OP's situation since they have other content in the modal-body, but it might be helpful to someone else. To use it, just add the class modal-dialog-scrollable to the same div that has the modal-dialog class.

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>

For Bootstrap versions < 4.3 (old answer)

You can do this using overflow-y:auto and vh units. Set the max-height property of your scrollbox to 100vh (full viewport height) and subtract some arbitrary number of pixels to account for everything outside the scrollbox (that you want to keep inside the viewport). Then add the overflow-y:auto rule so that if the content exceeds the max-height, a scrollbar will appear. This is pretty similar to this answer except using CSS instead of jQuery.

#scrollbox {
border: 1px solid red;
overflow-y: auto;
max-height: calc(100vh - 150px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<input type="button" data-toggle="modal" data-target="#myModal" value="Launch Modal">

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        Hello, below is some text in a div that should start scrolling if the height of the modal exceeds the browser.
        
        <p><div id="scrollbox">
          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>
    </div>
  </div>
</div>

Also, I never saw this `100vh` before. I've always used `calc(100% -`. — Daniel Williams, Aug 23 '16 at 00:05
@DanielWilliams 100% would evaluate to 100% of its parent, while 100vh would evaluate to 100% of the viewport. — Cave Johnson, Aug 23 '16 at 00:10

score 3 · Answer 2 · answered Aug 22 '16 at 23:30

You can use jquery to asign a max-height in base to the height of the window, i use this code for that situations:

Jquery:

<script>
$(function() {
    // Get the height of the window
    var height = $(window).height();
    $('#scrollbox').css('max-height', height+'px');
});
</script>

if you want, you can subtract pixels to the height of the window, for example i want to subtract 100px to the height of the window:

var height = ($(window).height() - 100);

Css:

#scrollbox{
    overflow-y: auto;
}

i hope will be helpful.

Regards!

Works nice, but I would change `$(window).height();` to `$(document).height();` to get the height of the actual browser, not just the HTML content within. — Daniel Williams, Aug 22 '16 at 23:57

Luis Martins · Answer 3 · 2020-10-17T13:06:09.633

0

I added this css to my project and now I have the bootstrap modals to scroll when they are too long.

.modal {
    overflow-x: hidden;
    overflow-y: auto;
}

edited Oct 17 '20 at 13:06

answered Oct 16 '20 at 11:44

Luis Martins

1
1

1

Please add some explanation to your answer such that others can learn from it – Nico Haase Oct 16 '20 at 12:41

Set Bootstrap modal content to scroll if height exceeds browser

3 Answers3

For Bootstrap versions >= 4.3

For Bootstrap versions < 4.3 (old answer)

Linked