Angular Js中的可滚动下拉菜单

Question

我的Dropup看起来像这样 - ＆gt;

<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-menu上使用CSS作为 - ＆gt;

overflow: scroll;
max-height: 200px;

但它对我不起作用。 任何其他解决方案？

更新 将此Css添加到下拉菜单 - ＆gt;

之后

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

我的下拉菜单现在看起来没有可滚动的＆gt;

Answer 1

在你最外层的div中添加这个样式属性

{{1}}

这对我有用。

Answer 2

应更改您的展示方式

代替

..
--langdef=cmake
--langmap=cmake:(CMakeLists.txt)
--langmap=cmake:+.cmake
...

使用

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