Presently, I am developing a customized AngularJS drop-down feature, which is outlined in the following HTML structure:
<div>
<label></label>
<div>
<a ng-class="{active: popover}">
<div></div> <!-- the selected item -->
</a>
<div style="position: relative;"> <!-- This div displays the menu items list-->
<div class="popover" ng-class="{popover-show}">
<input /> <--! this is a search box -->
<ul ng-repeat="item in items">
</ul>
</div>
</div>
</div>
</div>
The styles for .popover and .popover-show are based on Twitter Bootstrap with additional rules listed below:
.popover{
top: 20px;
left: auto;
right: 0;
max-width: none;
border-collapse: separate;
}
.popover.popover-show {
display : block !important;
}
The div with the postition:relative wraps the content. The directive is functioning properly. Nonetheless, when the drop-down is positioned lower than the page midpoint and has too many items leading to overflow beyond window height, vertical scroll bar appears. I have searched for similar issues without finding an exact solution. Therefore, my query is about suggesting the best approach to detect window height exceedance (CSS or directive) and set the bottom position to 0?
I appreciate your assistance!
UPDATE: I am aiming to address the issue without dependency on jQuery or Twitter Bootstrap JS files.