Scrolling drop-down menu in Angular Js

Question

My Dropup looks like this:>

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

And I use CSS in the dropdown as →

 overflow: scroll; max-height: 200px; 

But this does not work for me. Any other solution?

Update After adding this Css to the drop-down menu->

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

My popup menu now looks without scrolling →

Answer 1

In your outer most div, add this to your style attribute

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

It worked for me.

Answer 2

Your mapping approach needs to be changed

instead

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

using

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

then apply

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