[I4] Refresher not shown in content when used inside a component

Ionic Framework
1

Hi All,

I’m bulinding an ionic 4 app in which I have several pages which can refresh to update some data. For all pages the refresh functionality is the same. So, in order to save code I’ve isolated the ion-refresher component onto a component of my own which I could use on any page to be refreshed. The problem is When doing so the refresher is present but it isn’t shown over the ion-content tag. Basically what I did was;

refresher.component.html

<ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content refreshingSpinner="dots"></ion-refresher-content>
</ion-refresher>

Page component.html

<ion-content>
    <refresher-component></refresher-component>
    <ion-list>
       <ion-item>
            .... some content
       </ion-item>
    </ion-list>
</ion-content>

The resulting view isn’t the expected one, and the problem here as I understand is that the shadow dom that the ion-content generates, has a different style when pulling to refresh. Here on the screenshot below you can see how the inner div from the ion-content gets a translateY of 60px (this is added dynamically while pulling to refresh). Before, when setting the ion-refresher directly on the page component this didn’t happen when pulling to refresh.

refresher

Any hint on how could I solve this? Thanks a lot!

2

Can you post the same images when the component is not used and the refresher is added locally?

3

Hi Geoff.

Originally to achieve the image shown before, then I had to add some style to the refresher component itself

refresher-component{
    display: block;
    position: relative;
    height: 60px;
}

When having the ionic refresher local to the page component then the view is the following:

<ion-content>
    <ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content refreshingSpinner="dots"></ion-refresher-content>
    </ion-refresher>
    <ion-list>
       <ion-item>
            .... some content
       </ion-item>
    </ion-list>
</ion-content>

refresher2
refresher2.png579×834 4.1 KB

1 Like
4

Thanks for the info. I had a similar problem trying to encapsulate the ion-refresher but only needed to put this in my refresher-component.scss file to get it to work.

ion-refresher {
position: relative;
}