Bootstrap Modal browser resize issue

If you are using Bootstrap Modal  and when you resize your browser size to small enough, your modal will get cut off and you have no way to access the modal footer.

Try the demo in their page, click the demo link and resize your browser, you won't be able to access the button in the modal anymore.
http://twitter.github.com/bootstrap/javascript.html#modals

There may be several ways to solve this, one of them, we found the cheapest is using "media query" in css3, and there are some polyfills to make IE understand "media query".

And you can do something similar to below ( just example, make changes to fit your need )


/* create a rule for height that is smaller than 600px */
@media screen and (max-height: 600px) {
    /* make sure modal shrinks with the browser  */
    .my_dialog .modal-body, .modal-body {
        max-height:300px;
        overflow-y: scroll;
    }
}

What above does is to make the modal body size smaller when the screen size shrink to less than the max height that defined, and it will make the modal body scrollable.

But there are more than one way to fix the problem, this is just one of them.  Hope this helps :)