Make dropdown menu go upwards if it is at the bottom of the browser window, automatic toggle between down and up, depending on position [duplicate]

Question

I am getting problem in Dropdown that goes down but it should go up according to window size.i am getting this problem in Angular UI Grid. Please see a link to understand better.

<div ng-controller="MyCtrl">
<div class="container">
    <div class="row">
        <div class="span2">
            <table class="table">
                <tr ng-repeat="row in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]">
                    <td> <a>{{row}}</a>

                    </td>
                    <td>
                        <ul class="nav">
                            <!-- To create dropups instead of dropdowns i could add the class "dropup" to the li-element below. -->
                            <!-- But what I need is an inteligent mechanism that decides when to use dropdown and when to use dropup -->
                            <li class="dropdown"> <a class="btn-link dropdown-toggle">
                                <i class="icon-align-justify"></i>
                            </a>

                                <ul class="dropdown-menu">
                                    <li ng-repeat="menu in [1,2,3]"> <a class="btn-link">{{menu}}</a>

                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

Answer 1

You are going to have to handle this yourself, it may be a little messy but I honestly I don't see how you can do it otherwise. I have modified your li tag to add a class (you can also use id) attribute to be able to reference it using jQuery (or plain javascript if you want to) and then added an ng-class to be able to dynamically assign either dropdown or dropup.

<li class="{{'row-' + row}}" ng-class="getClass(row)">
    <a class="btn-link dropdown-toggle"><i class="icon-align-justify"></i></a>
    <ul class="dropdown-menu">
        <li ng-repeat="menu in [1,2,3]"> <a class="btn-link">{{menu}}</a></li>
    </ul>
</li>

Now, inside your controller, you can create the getClass function to decide, based on the dropdown's position relative to the window, which class it should have.

var dropdownHeight = 140; // estimate/calculate the dropdown list's height manually
$scope.getClass = function (row) {
    if ($(window).height() - $('.row-' + row).position().top < dropdownHeight) {
        return 'dropup';
    }
    return 'dropdown';
};

You can play around with the values of the height until satisfied with the behavior, but keep in mind the you might want to add an event listener on window resize (and related events) to be able to recalculate the classes based on the new numbers.