AngularJS：滾動預輸入輸入字段

我的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/

來源

2016-07-28 Lynob

問題在於您的選擇器。試試這個：

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

您可以檢查其是否按預期工作在這種fiddle

來源

2016-07-30 12:44:31 Akis

是啊，但我不會將其設置爲所有的下拉菜單，所以它應該是這樣的＃可滾動下拉菜單.typeahead { – Damiano

@Damiano是實際上，元素的id應該被添加 – Akis

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

試試這個，使未來的清單，scrolable

來源

2016-07-30 13:36:21 KCFragrance

以下似乎是工作的罰款。檢查下面的工作示例：

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>

來源

2016-07-30 14:04:54

AngularJS：滾動預輸入輸入字段

回答

相關問題