滚动Dropup菜单中角的js

Question

我Dropup看起来是这样的 - >

<div class="dropup"> 
    <button class="btn btn-primary btn-raised dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
               {{selectList.selectedListItem}} 
     <div class="ripple-container"></div> 
    </button> 
    <div class="dropdown-menu"> 
     <a class="dropdown-item" ng-repeat="list in roleList" href="#" ng-value="list.role" name="{{list.role}}" ng-click="update(list.role, list._id)" id="{{list.role}}" ng-model="selectList" name="selectedList">{{list.role}}</a> 
    </div> 
</div> 

，我使用dropup菜单上CSS - >

overflow: scroll; 
max-height: 200px; 

但它并不适用于工作我。 任何其他解决方案？

更新 添加这个CSS到下拉 - 菜单 - >后

overflow: scroll; 
max-height: 200px !important; 

我的下拉菜单现在看起来就像没有scrollable->

Answer 1

在你最外层的div的风格属性

<div class="dropdown-menu" style="height: 200px;overflow: auto;"> 

这为我工作添加此。

Answer 2

你的显示器的方法应该改变

inst EAD

<div class="dropdown-menu"> 
     <a class="dropdown-item" ng-repeat="list in roleList" href="#" ng-value="list.role" name="{{list.role}}" ng-click="update(list.role, list._id)" id="{{list.role}}" ng-model="selectList" name="selectedList">{{list.role}}</a> 
    </div> 

使用

<ul class="dropdown-menu scrollable-dropUp"> 
    <li><a class="dropdown-item" ng-repeat="list in roleList" href="#" ng-value="list.role" name="{{list.role}}" ng-click="update(list.role, list._id)" id="{{list.role}}" ng-model="selectList" name="selectedList">{{list.role}}</a></li> 
<ul> 

然后应用

.scrollable-dropUp{ 
    overflow: scroll;  /*overflow-x and overflow-y*/ 
    max-height: 200px !important; 
}