I’m using Card and Slide in ionic, content of slide include a lot of slide with: content text or video. When I display first slide it displayed normal with just video, but when I move to second slide with a text content, it appear while space as below photo:
my HTML:
<ion-card>
<ion-list>
<ion-row>
<ion-col class="title_text">> Question Sheet</ion-col>
</ion-row>
<ion-slides>
<ion-slide *ngFor="let content of item_exam; let i = index;">
<div class="row_ans">
<ion-row>
<ion-label>{{content.page}}. <div class="mark_answer" [innerHTML]= "content.question"></div></ion-label>
</ion-row>
<ion-row>
<ion-label><div class="score_ans">{{content.allotting}} scores </div></ion-label>
</ion-row>
</div>
<ion-row>
<ion-col>
<button (click)="prev_button()" color="danger" ion-button text-only [disabled]="i === 0">Previous</button>
</ion-col>
<ion-col>
<button [disabled]="!item_exam" *ngIf="i<item_exam.length - 1" ion-button text-only color="danger" (click)="next_button()">Next</button>
</ion-col>
</ion-row>
</ion-slide>
</ion-slides>
</ion-list>
</ion-card>
My scss
.ion-card_resize {
// height: 50% !important;
display:block;
height: auto !important;
// margin-top: 0;
// margin-bottom:0;
// padding-top:0;
}
ion-slides {
height: auto !important;
}
ion-card {
height: auto !important;
}
.row_ans {
float:left;
margin-right:130px;
font-size: 11pt;
width: 100%;
}
.score_ans {
margin-right: 160px;
font-size: 10pt;
}
How to auto resize this slide, card or remove blank space as photo ?