2017-01-30 16 views
5

enter image description here Moja Dropup wygląda tak ->Przewijany Dropup Menu w Kątowymi Js

<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 używam CSS na dropup-menu jako ->

overflow: scroll; 
max-height: 200px; 

Ale to nie zadziała mnie. Jakieś inne rozwiązanie?

Aktualizacja Po Dodanie tej rozwijanej CSS-menu->

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

Moje menu rozwijanego-teraz wygląda bez scrollable->

Updated_DropUp_Image

+1

Co masz na myśli przez ** To nie działa **? – Shubhranshu

+0

Dodaj działające skrzypce. –

+0

jest 'rozwijanym menu' twoją własną klasą lub trzecią stroną klasy css jak boosterstrap lub materiałowy projekt? Możesz spróbować 'max-height: 200px! Important' – barteloma

Odpowiedz

1

w twoich najbardziej zewnętrzna div dodać ten atrybut w stylu

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

Ten pracował dla mnie.

0

swoje podejście wyświetlacza należy zmienić

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> 

użycie

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

następnie zastosować

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

Problem wciąż jest taki sam @chaitra –