7
votes

Angularjs: Champ de saisie de type fautes défilable

Mon HTML

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

css angularjs typeahead.js bootstrap-typeahead twitter-typeahead

0 commentaires

3 Réponses :

15
votes

Le problème est avec votre sélecteur. Essayez celui-ci:

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

2 commentaires

Yup, mais je ne le réglerais pas à tous les menus déroulants, il devrait donc être comme # un menu déroulant défilable .typeahead {

@Damiano oui en effet, l'identifiant de l'élément doit être ajouté

0
votes

  #scrollable-dropdown-menu ul {
    max-height: 78px;
    overflow-y: auto;
 }
Try this to make coming list as scrolable

0 commentaires

2
votes

Ce qui suit semble fonctionner bien. Vérifiez l'exemple de travail ci-dessous:

<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>

0 commentaires