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 :)

Twitter bootstrap popover doesn't work with click event

We were playing with the Twitter bootstrap javascript library lately,  and found out the popover doesn't play well with 'click' event in Chrome (FF works though).  I tried to find solution on the web, but didn't find what we want or the solution doesn't work. Hopefully this post might provide a solution that can help others.

The way we get around this is to wrap the popover call inside a callback which listen to click.

        // ... probably in your initialize function
        $('my-selector').bind('click', this.showPopover);

        // ... somewhere inside an object
        showPopover: function(e){
            var $popTrigger = $(e.target),
                $closeBtn = $('.popover .close-btn');

            $closeBtn.trigger("click");

            (function(that){
                $popTrigger.popover({
                    html:true,
                    placement:'below',
                    offset:8,
                    trigger:'manual',
                    title:function () {
                        return "Well, title!"
                    },
                    content:function () {
                        return that.getContent();
                    }
                });
            })(this);

            $popTrigger.popover("show");

            $closeBtn.live('click', function(e){
                $popTrigger.popover("hide");
                e.preventDefault();
            });

            e.preventDefault();
        }

You can enhance the code by checking if the elements already have desired events attached, so you don't need to trigger that twice.  And if you are designing a one page app, you may need to add function to  hide/remove the popover when the page context is changing.