CODEWITHSUNDEEP
csstwitter-bootstrap
Subodh Nijsure
Subodh Nijsure

Reputation: 3453

How to put scroll bar only for modal-body?

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 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.

The image looks something like this:

enter image description here

How do I get a scroll bar around modal-body only?

I have tried assigning style="overflow-y: scroll; max-height:85%; margin-top: 50px; margin-bottom:50px;" to modal-body but it didn't work.

Upvotes: 243

Views: 576537

Answers (15)

Ashique T
Ashique T

Reputation: 21

add class modal-dialog-scrollable if you are using bootstrap 4.5 or higher

else

.modal-body{
    height :100%;
    overflow-y:auto;
}

Upvotes: 0

M&#225;rio Costa
M&#225;rio Costa

Reputation: 1

If you are using boostrap, you can past the tag at the div: class="dataTables_scrollBody" style="position: relative; overflow: auto; max-height: 500px;"

Upvotes: 0

Elias Bobadilla
Elias Bobadilla

Reputation: 131

In your modal body you have to set a height, it can be % vh or calc:

modal-body {
    height: 80vh;
    overflow-x: auto;
}

or

modal-body {
    height: calc(100vh - 5em);
    overflow-x: auto;
}

In my case look like: enter image description here

Upvotes: 4

Carlos Calla
Carlos Calla

Reputation: 6706

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: 80vh;
    overflow-y: auto;
}

Upvotes: 423

Msk Satheesh
Msk Satheesh

Reputation: 1536

In latest bootstrap version there is a class to make modal body scrollable.

.modal-dialog-scrollable to .modal-dialog.

Bootstrap modal link for modal body scrollable content

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Upvotes: 10

Cave Johnson
Cave Johnson

Reputation: 6778

For Bootstrap versions >= 4.3

Bootstrap 4.3 added new built-in scroll feature to modals. This makes only the modal-body content scroll if the size of the content would otherwise make the page scroll. 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>

Upvotes: 58

Stephen Ngethe
Stephen Ngethe

Reputation: 1044

What worked for me is setting the height to 100% the having the overflow on auto hope this will help

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

Upvotes: 1

user7695590
user7695590

Reputation: 181

Or simpler you can put between your tags first, then to the css class.

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

Upvotes: 7

Bogus Hawtsauce
Bogus Hawtsauce

Reputation: 483

I know this is an old topic but this may help someone else.

I was able to make the body scroll by making the modal-dialog element position fixed. And since I would never know the exact height of the browser window, I took the information I was sure about, the height of the header and the footer. I was then able to make the modal-body element's top and bottom margins match those heights. This then produced the result I was looking for. I threw together a fiddle to show my work.

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

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

And here is the css that I used to modify 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;
}

Upvotes: 7

Iib Thoyib Basarah
Iib Thoyib Basarah

Reputation: 507

Problem solved with combine solution @carlos calla and @jonathan marston.

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

Upvotes: 49

dimbslmh
dimbslmh

Reputation: 1821

Optional: If you don't want the modal to exceed the window height and use a scrollbar in the .modal-body, you can use this responsive 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'));
  }
});

Upvotes: 13

Steven
Steven

Reputation: 2258

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

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

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

Browser compatibility chart for vh unit.

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

Upvotes: 4

migli
migli

Reputation: 3252

A simple js solution to set modal height proportional to body's 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's height has to be 100% :

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

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

Hope it helps.

Upvotes: 0

Jonathan Marston
Jonathan Marston

Reputation: 1438

If you're only supporting IE 9 or higher, you can use this CSS that will smoothly scale to the size of the window. You may need to tweak the "200px" though, depending on the height of your header or footer.

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

Upvotes: 140

laurak
laurak

Reputation: 363

Adding on to Carlos Calla's great answer.

The height of .modal-body must be set, BUT you can use media queries to make sure it's appropriate for 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; }
}

Upvotes: 16

Related Questions