Hey guys! I’ve got a tricky issue here. I’m opening a new-exercise-plan component using the ModalController, but the problem is that I need to implement infinite scroll, and the ion-content height isn’t adjusting correctly. Any ideas on how to fix this?
<ion-header>
<ion-toolbar>
<div class="toolbar-modal-content">
<h3 *ngIf="!selectedExercise">Selecciona un ejercicio</h3>
<h3 *ngIf="selectedExercise">Crear plan de ejercicio</h3>
<button class="circle-btn" (click)="goBack()"><ion-icon name="close-outline"></ion-icon></button>
</div>
</ion-toolbar>
</ion-header>
<div class="modal-wrapper">
<div class="select-exercise" *ngIf="!selectedExercise">
<button (click)="toggleNewExercise()">Crear ejercicio</button>
<ion-content>
<div class="exercises-wrapper">
<div (click)="selectExercise(exercise)" class="exercise" *ngFor="let exercise of displayedExercises">
<img src="{{exercise.imgUrl}}" alt="Imagen del ejercicio" srcset="">
<span>{{exercise.name}}</span>
</div>
</div>
<ion-infinite-scroll threshold="100px" (ionInfinite)="onIonInfinite($event)">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Cargando....">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
</div>
As you guys can see in the image the ion-content is too short!!!
I’ve tried setting ion-content to a height of 90vh in the CSS since it doesn’t accept percentages, and while it fixes the issue, it still feels quite messy because it doesn’t adapt well on tablets. The modal doesn’t open in full-screen mode on tablets, so I wanted to know if there’s a way to make it fully adjust to the available height.
Im opening the modal with this ModalController method:
async toggleNewExercisePlan() {
const modal = await this.modalCtrl.create({
component: NewExercisePlanComponent,
initialBreakpoint: 1,
id : 'new-exercise-plan-modal'
});
return await modal.present();
}
3 posts - 2 participants