4

我的HTMLAngularJS:滚动预输入输入字段

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

我的CSS

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

我使用的角度1.x和预输入随角bootsrap,我不能让滚动条出现。

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

回答

6

问题在于您的选择器。试试这个:

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

您可以检查其是否按预期工作在这种fiddle

+0

是啊,但我不会将其设置为所有的下拉菜单,所以它应该是这样的#可滚动下拉菜单.typeahead { – Damiano

+0

@Damiano是实际上,元素的id应该被添加 – Akis

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

试试这个,使未来的清单,scrolable

2

以下似乎是工作的罚款。检查下面的工作示例:

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>