css - 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 too small the modal didn't scroll (if just disappeared off my page which isn't scrollable).

To fix this I used the following css

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

This works exactly the way I want it to in Chrome (that is, the form is full size when the window is big enough, but as the window shrinks the modal shrinks and becomes scrollable). The problem is that in IE the modal is off the screen. Does anyone have a better solution to this problem?

My example can be found at tinyhousemap.com (click 'Add an Entry to the map' in the navigation window for the modal to appear)

Thanks

Answer 1

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.