ионный список фиксированный высота аккордеон

Question

У меня есть ионный список аккордеона, что я хотел бы иметь фиксированную высоту. что я не хочу, чтобы весь аккордеон прокручивал только внутренний список, чтобы заголовки аккордеона были видны в любое время.

Так он должен работать как jQuery аккордеона

Вот пример моего CSS:

.list .item.item-accordion { 
    line-height: 38px; 
    padding-top: 0; 
    padding-bottom: 0; 
    transition: 0.09s all linear; 
} 
.list .item.item-accordion.ng-hide { 
    line-height: 0px; 
} 
.list .item.item-accordion.ng-hide-add, 
.list .item.item-accordion.ng-hide-remove { 
    display: block !important; 
} 

Я сделал codepen для демонстрации.

Answer 1

Этот вид работы. Он нуждается в некоторой настройке, но, надеюсь, вы пойдете в правильном направлении.

Редактируйте html, чтобы добавить обертку в ng-repeat.

<div class="ion-checkbox-viewport"> 
    <ion-checkbox ng-repeat="filter in group.filters | orderBy: 'name'" class="item-accordion" value="{{filter.name}}" ng-model="filter.checked" ng-change="ModifyFilter(filter)" ng-show="isGroupShown(group)"> 
     {{filter.name}} 
    </ion-checkbox> 
    </div> 

Затем добавить правило CSS:

.ion-checkbox-viewport { 
    max-height: 200px; 
    width:100%; 
    display:block !important; 
    overflow:scroll !important; 
} 

Все это делает обертывания нг-повтор в другой родительский элемент, то он устанавливает максимальную высоту на этом элементе и прокрутка по мере необходимости.

http://codepen.io/anon/pen/LVxwxP