How to enable scrolling content inside a Bootstrap

Question

I'm trying to fit a lot of text into a modal box created using Twitter Bootstrap but I'm having a problem: the content refuses to scroll. I tried adding overflow:scroll and overflow-y:scroll but to no avail; that merely causes it to display a scroll-bar without actually enabling scrolling.

What's the cause behind that and what can I do?

Answer 1

I was able to overcome this by using the "vh" metric with max-height on the .modal-body element. 70vh looked about right for my uses.

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}

Answer 2

This is how I did it purely with CSS overriding some classes:

.modal {
  height: 60%;

  .modal-body {
    height: 80%;
    overflow-y: scroll;
  }
}

Hope it helps you.

Answer 3

.modal-body {
    max-height: 80vh;
    overflow-y: scroll;
}

it's works for me

Answer 4

After using all these mentioned solution, i was still not able to scroll using mouse scroll, keyboard up/down button were working for scrolling content.

So i have added below css fixes to make it working

.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    **pointer-events: auto;**
}

Added pointer-events: auto; to make it mouse scrollable.

Answer 5

I'm having this issue on Mobile Safari on my iPhone6

Bootstrap adds the class .modal-open to the body when a modal is opened.

I've tried to make minimal overrides to Bootstrap 3.2.0, and came up with the following:

.modal-open {
    position: fixed;
}

.modal {
    overflow-y: auto;
}

For comparison, I've included the associated Bootstrap styles below.

Selected extract from bootstrap/less/modals.less (don't include this in your fix):

// Kill the scroll on the body
.modal-open {
  overflow: hidden;
}

// Container that the modal scrolls within
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  -webkit-overflow-scrolling: touch;
}

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

Mobile Safari version used: User-Agent Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4

Answer 6

I had the same issue, and found a fix as below:

$('.yourModalClassOr#ID').on('shown.bs.modal', function (e) {
    $(' yourModalClassOr#ID ').css("max-height", $(window).height());
    $(' yourModalClassOr#ID ').css("overflow-y", "scroll");          /*Important*/
    $(' yourModalClassOr#ID ').modal('handleUpdate');

});

100% working.