CODEWITHSUNDEEP
ioscssionic-frameworkscrollionic3
Fawaz
Fawaz

Reputation: 41

Ionic 3: Cannot scroll ion-list overflow-y for an iOS-device where ion-items are generated inside ion-list using ngFor

Using ionic v3 for developing a hybrid app,I have ion-items in ion-list generated using *ngFor. The problem is for the iOS devices i.e, I can't scroll ion-list which overflows in y-direction. But there is no such issue for android devices.

Below is the HTML code

<ion-list class="scroll-content">
<ion-item *ngFor="let diaryEvent of diaryEvents">
  <h2>{{ diaryEvent.title || "None" }}</h2>
  <h3>{{ moment(diaryEvent.day).format("YYYY-MM-DD") }}</h3>
  <p>{{ diaryEvent.notes }}</p>
  <p>
    <ion-icon *ngIf="diaryEvent.videoFilePath" name="videocam" (click)="eventPopup($event, diaryEvent)"></ion-icon>
    <ion-icon *ngIf="diaryEvent.audioFilePath" name="mic" (click)="eventPopup($event, diaryEvent)"></ion-icon>
  </p>
  <span (click)="viewDiaryEvent(diaryEvent)">
    <u>View</u>
    <ion-icon name="eye"></ion-icon>
  </span>
  <span (click)="editEvent(diaryEvent)">
    <u>Edit</u>
    <ion-icon name="create" ></ion-icon>
  </span>
</ion-item>

Below is the CSS

.scroll-content{
  overflow-y:scroll !important;
  height:88vh;
}

I am expecting the app to have a smooth scroll as it is default for the android device.

Please help me if anyone have the solution for the problem. I have been working my head for three days for this issue. Would be thankful to obtain a solution.

Sorry if any mistake in way of asking a question or with my english, as this is my first question here.

Thank You.

Upvotes: 3

Views: 2126

Answers (2)

Fawaz
Fawaz

Reputation: 41

Solution that worked around for me was updating my ionic-angular version from 3.9.2 to 3.9.5 in package.json , and then npm install. Thanks.

Upvotes: 1

MiracleMike
MiracleMike

Reputation: 86

You should put your list into the <ion-content> element and remove your css class. This component will handle the scroll and will enable you to track events if you need.

https://ionicframework.com/docs/api/content

Upvotes: 1

Related Questions