Ion-infinite-scroll not shown inside modal

Ionic Framework
1

I have an issue, im trying to use ion-infinite-scroll after ion-list in modal. and its not showing the spinner.

here is my html

<ion-content>
    <ion-content id="innerContent">
        <ion-list>
            <ion-item *ngFor="let p of list">
                {{p.name}}
            </ion-item>
        </ion-list>

        <ion-infinite-scroll (ionInfinite)="loadMore($event)">
            <ion-infinite-scroll-content loadingSpinner="circles">
            </ion-infinite-scroll-content>
        </ion-infinite-scroll>

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

is anyone facing the same issue?

2

Why do you have two <ion-content>? You should not have more than one per page

1 Like
3

It’s working fine, i just want to detect scrolling event in my list. There is no issue for that in page component, but when it comes to modal component, the ion-infinte-scroll didn’t show.

4

You don’t answer my question. You should never have an <ion-content> right inside of another <ion-content>… why do you have this?

5

Because i have other element outside the innerContent, why i cannot have an <ion-content> inside <ion-content> ?

6

Because this is not how Ionic’s Structure is designed. You can read more about this here: Structure Layout | Structures for Content Layout on Ionic Apps

1 Like
7

The code example is working flawlessly - give it at try?

No double ion-content as per @EinfachHans 's core observation

Likely the two ion-contents in your way are fighting for the swipe gesture event and then it never reaches the infinite scroller.

(you can put two ion-contents NEXT to each other, but then you like to have to separate scroll areas or so?)

2 Likes
8

Thanks for the help @EinfachHans @Tommertom , i solved my problem by removing those double ion-content

1 Like
9

Great! Maybe better mark @EinfachHans first post as solution?

2 Likes