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

它只是将ng-repeat包装在另一个父元素中，然后在该元素上设置最大高度并根据需要滚动。

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

离子列表固定高度手风琴

1 个答案: