Ionic 3 - Scroll issue

Question

I am doing an Ionic 3 app and on some pages there is no scroll, like this page :

History.html

 <ion-card *ngFor="let h of History; let i=index" text-wrap (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}" class="HistoryPage">
    <ion-card-header>
         <span class="title">{{h.nom_commun}}</span>
         <span class="date">{{h.date_signalement}}</span>
         <button (click)="openPage()" class="edit">
             <ion-icon large name="create" color="mainColor" class="edit"></ion-icon>
         </button>
    </ion-card-header>
    <ion-card-content>

        <ion-icon color="success" item-right [name]="isGroupShown(i) ? 'arrow-dropdown-circle' : 'arrow-dropright-circle'" color="mainColor"></ion-icon>
        <br />
        <div *ngIf="isGroupShown(i)">
            <div class="up">
                <ion-slides class="Pictures" slidesPerView="3">
                    <ion-slide>
                        <img src="{{h.image}}" />
                    </ion-slide>
                    <ion-slide>
                        <img src="../assets/img/rossignol3.jpg"  />
                    </ion-slide>
                    <ion-slide>
                        <img src="../assets/img/rossignol4.jpg"  />
                    </ion-slide>
                    <ion-slide>
                        <img src="{{h.pictures}}"  />
                    </ion-slide>
                </ion-slides>

                <ion-list>
                        <p><strong>Nom codifié :</strong> {{h.nom_codifie}}</p>
                        <p><strong>Etat actuel :</strong> {{h.etat_actuel}}</p>
                        <p><strong>Date de réception :</strong> {{h.date_reception}}</p>
                        <p *ngIf="h.date_renvoi"><strong>Date de renvoi en liberté :</strong> {{h.date_renvoi}}</p>
                        <p><strong>Pays :</strong> {{h.pays}}</p>
                        <p><strong>Lieu de signalement :</strong> {{h.lieu_signalement}}</p>
                        <p><strong>Condition du signalement :</strong> {{h.condition_signalement}}</p>
                        <p><strong>Numéro d'immatriculation :</strong> {{h.immatriculation}}</p>
                </ion-list>

            </div>
        </div>

    </ion-card-content>
</ion-card>

History.ts :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { EditBirdPage } from '../EditBird/EditBird';
import { BirdService } from '../../providers/bird-service';
import { jQuery } from 'jquery';

@Component({
  selector: 'page-History',
  templateUrl: 'History.html'
})

export class HistoryPage {

    History:any =[];

    constructor(public navCtrl: NavController, public serviceOne: BirdService) {
        this.serviceOne.getData().subscribe(
            data => this.History = data
        );
    }

    openPage() {
        this.navCtrl.push(EditBirdPage);
    }

    shownGroup = null;

    toggleGroup(group) {
        if (this.isGroupShown(group)) {
            this.shownGroup = null;
        } else {
            this.shownGroup = group;
        }
    };

    isGroupShown(group) {
        return this.shownGroup === group;
    };
}

The scroll work only on page with basic text but with content which is generate or open manually ( like an accordion ) it's not working.

Thanks for your help !

Answer 1

Infinite Scroll

    <ion-header>

  <ion-navbar>
    <ion-title>InfScroll</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
   <ion-list>
   <ion-item *ngFor="let i of items">{{i}}</ion-item>
 </ion-list>

 <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
 </ion-infinite-scroll>

</ion-content>

home.ts

export class InfScrollPage {
   items = [];
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    for (let i = 0; i < 30; i++) {
      this.items.push( this.items.length );
    }
  }
    doInfinite(infiniteScroll) {
    console.log('Begin async operation');

    setTimeout(() => {
      for (let i = 0; i < 30; i++) {
        this.items.push( this.items.length );
      }

      console.log('Async operation has ended');
      infiniteScroll.complete();
    }, 500);
  }

  // ionViewDidLoad() {
  //   console.log('ionViewDidLoad InfScrollPage');
  // }

}

I hope it will help you

Answer 2

If you want your content to be scrolled, you need to wrap it inside ion-content like this,

<ion-content>
--your scrolling content goes here--
</ion-content>

in your case if you want History.html contents to be scrolled, then wrap it inside ion-content like this,

<ion-content>
<ion-card *ngFor="let h of History; let i=index" text-wrap (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}" class="HistoryPage">
    <ion-card-header>
         <span class="title">{{h.nom_commun}}</span>
         <span class="date">{{h.date_signalement}}</span>
         <button (click)="openPage()" class="edit">
             <ion-icon large name="create" color="mainColor" class="edit"></ion-icon>
         </button>
    </ion-card-header>
    <ion-card-content>

        <ion-icon color="success" item-right [name]="isGroupShown(i) ? 'arrow-dropdown-circle' : 'arrow-dropright-circle'" color="mainColor"></ion-icon>
        <br />
        <div *ngIf="isGroupShown(i)">
            <div class="up">
                <ion-slides class="Pictures" slidesPerView="3">
                    <ion-slide>
                        <img src="{{h.image}}" />
                    </ion-slide>
                    <ion-slide>
                        <img src="../assets/img/rossignol3.jpg"  />
                    </ion-slide>
                    <ion-slide>
                        <img src="../assets/img/rossignol4.jpg"  />
                    </ion-slide>
                    <ion-slide>
                        <img src="{{h.pictures}}"  />
                    </ion-slide>
                </ion-slides>

                <ion-list>
                        <p><strong>Nom codifié :</strong> {{h.nom_codifie}}</p>
                        <p><strong>Etat actuel :</strong> {{h.etat_actuel}}</p>
                        <p><strong>Date de réception :</strong> {{h.date_reception}}</p>
                        <p *ngIf="h.date_renvoi"><strong>Date de renvoi en liberté :</strong> {{h.date_renvoi}}</p>
                        <p><strong>Pays :</strong> {{h.pays}}</p>
                        <p><strong>Lieu de signalement :</strong> {{h.lieu_signalement}}</p>
                        <p><strong>Condition du signalement :</strong> {{h.condition_signalement}}</p>
                        <p><strong>Numéro d'immatriculation :</strong> {{h.immatriculation}}</p>
                </ion-list>

            </div>
        </div>

    </ion-card-content>
</ion-card>
</ion-content>