angularjs ui-select scroll show causing jerk

Question

I've spent a while trying to formulate this question online without success. My problem is that when I click ui-select-choices rendered by angularjs ui-select-choices, the list opens fine down, but when I have devtools up (and when the browser is less than certain width), the options open upward and temporarily trigger the showing of vertical scroll bar. It is present for milliseconds but is causing a jerk on page.

Tried setting max-height to ul and li without success. I can put an overflow: y but I don't like seeing the scrollbar.

Answer 1

My solution is a workaround: add "limitTo:" in the repeat to limit the amount of results displayed. Doing this keeps the display beneath the dropdown rather than above (limiting amount to a certain quantity gives me the ability to match how much room I have left on page)

<ui-select-choices repeat="item in $ctrl.data | filter: $select.search | limitTo: 6">
    <span ng-bind-html="item | highlight : $select.search"></span>
</ui-select-choices>