I have an an ionic list accordion that I would like to be of fixed height. meaning I do not want the whole accordion to scroll only inner list so that the headings of the accordion is visible at all times.
So it should work like the jQuery accordion
Here is a sample of my 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;
}
I have made a codepen for a demonstration.
This kinda works. It needs some tweaking, but hopefully will get you going in the right direction.
Edit your html to add a wrapper to the 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>
Then add a css rule:
.ion-checkbox-viewport {
max-height: 200px;
width:100%;
display:block !important;
overflow:scroll !important;
}
All it does is wraps the ng-repeat in another parent element, then it sets a max height on that element and scrolling as needed.