Here is the code snippet for my Dropup component:
<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>
I am applying CSS to the dropdown-menu as shown below:
overflow: scroll;
max-height: 200px;
Unfortunately, this CSS doesn't seem to work for me. Do you have any other solution?
Update: After adding this additional CSS to the dropdown-menu style:
overflow: scroll;
max-height: 200px !important;
My dropdown-menu now appears without scrollable options like this: