AngularJS: scrollable typeahead input field

Question

My HTML

<div class="form-group">
    <label class='control-label col-md-4' for='id_paymentCurrency'>{{'PAYMENT_CURRENCY' | translate}}</label>
    <div class='col-md-4'> 
        <div id="scrollable-dropdown-menu">
        <input type="text" class="form-control" data-trim-value="false" ng-trim="false" id ='id_paymentCurrency' ng-model="vm.data.paymentCurrency"  typeahead-append-to-body="true" required
        typeahead-editable="false"
        uib-typeahead="currency.code for currency in vm.getCurrencies($viewValue)"ng-disabled="disabled" />
    </div>   
  </div>  
</div>  

My CSS

#scrollable-dropdown-menu .tt-menu {
   max-height: 150px;
   overflow-y: auto;
 }

I'm using angular 1.x and typeahead that comes with angular-bootsrap, I can't make the scrollbar to appear.

http://fiddle.jshell.net/H7LA4/46/

Icono

Answer 1

The problem is with your selector. Try this one:

#scrollable-dropdown-menu .dropdown-menu {
    max-height: 150px;
    overflow-y: auto;
}

You can check that it is working as expected in this fiddle

Sweetening

Yup, but I would not set it up to all dropdown menus, so it should be like #scrollable-dropdown-menu .typeahead { – Syrian

@Damiano yes indeed, the id of the element should be added – Sweetening

Answer 2

The following seems to be working fine. Check the working example below:

angular.module('myApp', ['ui.bootstrap']);

function TypeaheadCtrl($scope) {

    $scope.selected = undefined;
    $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', '49503', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
}

angular.module('myApp').controller('TypeaheadCtrl', TypeaheadCtrl);

#scrollable-dropdown-menu .dropdown-menu {
   max-height: 150px;
   overflow-y: auto;
 }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>

<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"  crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div ng-app="myApp">
    <div class='container-fluid' ng-controller="TypeaheadCtrl"> <pre>State: {{selected| json}}</pre>
    
        <div id="scrollable-dropdown-menu">
        <input class="input-large" type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8">
    </div>
    </div>
</div>

Orms

Answer 3

  #scrollable-dropdown-menu ul {
    max-height: 78px;
    overflow-y: auto;
 }

Try this to make coming list as scrolable

Shumway