Ionic 4 Angular: Is it possible to have a fixed element in content while using infinite refresher?

Question

Consider a simple Ionic page's content:

<ion-content>

    <ion-refresher slot="fixed">...</ion-refresher>

    <div *ngFor="let item of items">
        ...
    </div>

    <ion-infinite-scroll>...</ion-infinite-scroll>

</ion-content>

I made a Stackblitz to demonstrate this page: https://stackblitz.com/edit/ionic-v4-angular-tabs-nbjk4k

Now I would like to add something with fixed position – let's say <div>Some content</div> – on the top or bottom of the page that is NOT within the ion-header or ion-footer section. Is it possible to fix that div to stick to the top or bottom?

The official advice I found on the Ionic docs and Github was to use slot="fixed" on any element that I would like to fix in the content area.

It somehow does not work for me, maybe there is a conflict with the slot="fixed" of the refresher component.

How can I achieve a fixed element?

Answer 1

Indeed there was an issue with slot="fixed", Ionic team did some changes for that.

The content(div?) needs to be wrapped in a position:relative wrapper.
Use position:relative in the tag and it should do the thing. For example - <div slot='fixed' style="position:relative">Some content</div>.

Follow this PR for more Info. Hope this helps!!

Answer 2

Link: https://github.com/ionic-team/ionic/issues/17754

There is a bug on slot="fixed". In order for you to make your desired output, you need to put style="position: relative" as per the discussion above.

I created a simple sample for you below:

<ion-content>
<div slot='fixed' style="position:relative">Some content</div>

 <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
  <ion-refresher-content></ion-refresher-content>
 </ion-refresher>

 <div *ngFor="let item of items; let i=index;" class="item">
   Item {{i}}: {{ item }}
 </div>

 <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
  <ion-infinite-scroll-content
    loadingSpinner="bubbles"
    loadingText="Loading more data...">
  </ion-infinite-scroll-content>
 </ion-infinite-scroll>
</ion-content>