Collision Detection in bootstrap dropdown

Question

I am using Twitter Bootstrap for a drop down menu. There is a case where if the element that opens the dropdown is at the bottom of the page the menu opens below it and gives a scroll to the page. I want to use collision detection here and in such cases, the menu should open above instead of below. In bootstrap 2.3.2 there is an option of drop up but If I use that, in all the cases the menu will Open on top. Are there any bootstrap based plugins for this? Or can I use jQuery UI position api along with bootstrap dropdown.

Code: Normal bootstrap dropdown

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"  data-delay="0" data-close-others="false">Account
</a>
<ul class="dropdown-menu">
    <li><a tabindex="-1" href="#">My Account</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Change Email</a></li>
    <li><a tabindex="-1" href="#">Change Password</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Logout</a></li>
</ul>

For the scenario see : http://jsfiddle.net/gd9S2/

Answer 1

I used jquery ui to position the bootstrap dropdown. For dropdown shown above:

    $('.dropdown').on('shown.bs.dropdown', function () {
        var menu = $(this).find('.dropdown-menu');

        if ((menu != null) && (menu.length == 1)) {
            var btn = menu.parent();

            menu.position({
                of: btn,
                my: "left top",
                at: "left bottom",
                collision: "flipfit"
            });
        }
    });

For a btn-group dropdown:

    $('.btn-group').on('shown.bs.dropdown', function () {
        var menu = $(this).find('.dropdown-menu');

        if ((menu != null) && (menu.length == 1)) {
            var btn = menu.parent();

            menu.position({
                of: btn,
                my: "left top",
                at: "left bottom",
                collision: "flipfit"
            });
        }
    });