Twitter bootstrap scrollable modal

Question

I\'m using twitter bootstrap for a project I am working on.

I have a modal window that has a somewhat longer form in it and I didn\'t like that when the window got

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. Then set the overflow-y to auto so it only scrolls when needed.

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

Answer 2

How about the below solution? It worked for me. Try this:

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

Details:

1. remove overflow-y: auto; or overflow: auto; from .modal class (important)
2. remove max-height: 400px; from .modal class (important)
3. Add max-height: 400px; to .modal .modal-body (or what ever, can be 420px or less, but would not go more than 450px)
4. Add overflow-y: auto; to .modal .modal-body

Done, only body will scroll.

Answer 3

Your modal is being hidden in firefox, and that is because of the negative margin declaration you have inside your general stylesheet:

.modal {
    margin-top: -45%; /* remove this */
    max-height: 90%;
    overflow-y: auto;
}

Remove the negative margin and everything works just fine.

Answer 4

I´ve done a tiny solution using only jQuery.

First, you need to put an additional class to your <div class="modal-body"> I called "ativa-scroll", so it becomes something like this:

<div class="modal-body ativa-scroll">

So now just put this piece of code on your page, near your JS loading:

<script type="text/javascript">
  $(document).ready(ajustamodal);
  $(window).resize(ajustamodal);
  function ajustamodal() {
    var altura = $(window).height() - 155; //value corresponding to the modal heading + footer
    $(".ativa-scroll").css({"height":altura,"overflow-y":"auto"});
  }
</script>

I works perfectly for me, also in a responsive way! :)

Answer 5

The problem with @grenoult's CSS solution (which does work, mostly), is that it is fully responsive and on mobile when the keyboard pops up (i.e. when they click in an input in the modal dialog) the screen size changes and the modal dialog's size changes and it can hide the input they just clicked on so they can't see what they are typing.

The better solution for me was to use jquery as follows:

$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });

It isn't responsive to changing the window size, but that doesn't happen that often anyway.

Answer 6

Try and override bootstrap's:

 .modal {
position: fixed;

With:

.modal {
position: absolute;

It worked for me.