css - Have list item take all the height -
i have page looks this:
<ion-navbar *navbar> <ion-title>my list</ion-title> </ion-navbar> <ion-content class="has-header"> <ion-list> <ion-item *ngfor="#item of items"> <ion-toolbar> <ion-buttons end> <button>something</button> </ion-buttons> </ion-toolbar> <img [src]="slide.image" class="slide-image"/> <h2 class="slide-title" [innerhtml]="slide.title"></h2> <p [innerhtml]="slide.description"></p> </ion-item> </ion-list> </ion-content>
let says there 100 items. each item take full height. should not able see next or previous item @ unless scroll. height of every item same size of ion-content guess. how can this? have tried playing around height, min-height, positioning, flex, have not been able make work?
you can use vh
units in modern browsers. support pretty good.
ion-content {background: #f6f6b2;} ion-content + ion-content {background: #b3f4b3;} ion-content {display: block; height: 100vh;}
<ion-content class="has-header"> <ion-list> <ion-item *ngfor="#item of items"> <ion-toolbar> <ion-buttons end> <button>something</button> </ion-buttons> </ion-toolbar> <img [src]="slide.image" class="slide-image"/> <h2 class="slide-title" [innerhtml]="slide.title"></h2> <p [innerhtml]="slide.description"></p> </ion-item> </ion-list> </ion-content> <ion-content class="has-header"> <ion-list> <ion-item *ngfor="#item of items"> <ion-toolbar> <ion-buttons end> <button>something</button> </ion-buttons> </ion-toolbar> <img [src]="slide.image" class="slide-image"/> <h2 class="slide-title" [innerhtml]="slide.title"></h2> <p [innerhtml]="slide.description"></p> </ion-item> </ion-list> </ion-content>
Comments
Post a Comment