1

I have a typeahead which I'd like to limit the height of the results and allow the user to scroll through and make their selection.

I have made this work by overriding the template and using max-height and overflow-y. While this has the effect when the user moves through the list with the keyboard the list doesn't actually scroll.

Here's my template override:

<script id="template/typeahead/typeahead.html" type="text/ng-template">
  <ul class="typeahead dropdown-menu results" ng-style="{display: isOpen()&&'block' || 'none', top: position.top+'px', left: position.left+'px'}">
    <li ng-repeat="match in matches" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-class-odd="'odd'">
        <a tabindex="-1" ng-click="selectMatch($index)" ng-bind-html-unsafe="match.label | typeaheadHighlight:query"></a>
    </li>
  </ul>    
</script>

And the CSS:

.results {
  max-height: 200px;
  overflow-y: auto;
}

Here's my plunkr demoing the issue

Craig Shearer
  • 14,222
  • 19
  • 64
  • 95

0 Answers0