jquery - Getting ul height of bootstrap dropdown with max-height set always results in max-height -

i'm writing conditional logic detect bootstrap dropdown in relation window , conditionally add class dropup dropdown expand upwards.

i have 3 dropdowns inside of table columns, , 3 dropdowns have different amount of items in them. here's example of one.

<td class="form-group" ng-controller="dropupcontroller up">     <div class="btn-group" dropdown keyboard-nav            ng-class="{ 'dropup': up.isdropup }" ng-click="up.toggledropup($event)">         <button type="button" class="btn btn-default" dropdown-toggle>             {{ othercontroller.text }} <span class="caret"></span>         </button>         <ul class="dropdown-menu" role="menu" aria-labelledby="simple-btn-keyboard-nav">             <li ng-repeat="item in othercontroller.collection" role="menuitem"                   ng-class="{ 'selected-dropdown-item' : item.id == othercontroller.collection.id }">              <a href="#" ng-click="othercontroller.setitem(item.id)">              {{ item.text }}</a>            </li>         </ul>     </div>     <input hidden id="itemvalue"            name="itemvalue" ng-model="othercontroller.id" required />            <!-- validating form --> </td> 

i have angularjs dropupcontroller function triggered when dropdown clicked.

app.controller('dropupcontroller', function () {     var vm = this;      vm.isdropup = false;     vm.toggledropup = toggledropup;      function toggledropup($event) {         var dropdowncontainer = $event.currenttarget;         var position = dropdowncontainer.getboundingclientrect().top;         var buttonheight = dropdowncontainer.getboundingclientrect().height;          var dropdownmenu = $(dropdowncontainer.nodename).find('.dropdown-menu');         var menuheight = dropdownmenu.outerheight();          var $win = $(window);          alert('menuheight: ' + menuheight); //debugging          if (position > menuheight && $win.height() - position < buttonheight + menuheight) {             vm.isdropup = true;         }         else {             vm.isdropup = false;         }     } }); 

and have css can set max-height of actual ul menu element , handle other oddities new behavior.

.selected-dropdown-item {     background-color: #cccccc; }  .dropdown-menu {     max-height: 300px;     overflow-y: auto; }  .dropup .caret {     border-top: 4px solid;     border-right: 4px solid transparent;     border-left: 4px solid transparent;     border-bottom: 0px; } 

the left-most dropdown has lot of items, enough hit max-height , trigger scrollbars. middle dropdown has 5 items in , right-most dropdown has 8 items in it. these last 2 not hit max-height.

this logic works great dropdown can fill whole 300px max-height of ul element. however, seems other 2 dropdowns end menuheight variable in controller being set 300 pixels well, causing menu dropup when doesn't need to. if comment out dropdown that's hitting 300 pixel max-height, height being reported of remaining dropdowns left-most existing dropdown (which has 5 items in it). repeating remove middle dropdown results in last remaining dropdown reporting height of it's contents correctly.

so in essence, getting height dropdowns pull height left-most dropdown, regardless of dropdown toggle. suspect it's scope issue relating $event.currenttarget , jquery's .find, can't sure , i'm not sure how further diagnose or solve it. suggestions?

can replace var dropdownmenu = $(dropdowncontainer.nodename).find('.dropdown-menu'); $(dropdowncontainer).find('.dropdown-menu'); nodename in case div.