Ion-refresher adds whitespace in ion-content when used in a component

Hi,

I want to create a component where I combine an ion-list and ion-refresher, so that it can easily be reused throughout my app. However the ion-refresher UI is buggy when I add it.

When using the following code, the UI acts as expected:

<ion-content>
  <ion-refresher slot="fixed">
    <ion-refresher-content      
    refreshingSpinner="circles"      
    refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>
  <ion-item>
    <ion-text>Test item</ion-text>
  </ion-item>
</ion-content>

However, when I put it in a custom component everything breaks:
CustomComponent

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="OpenMenu()">
        <ion-icon name="menu"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <app-issue-wrapper></app-issue-wrapper>
</ion-content>

HomePage

<ion-content>
  <app-issue-wrapper></app-issue-wrapper>
</ion-content>

To fix the overlapping issue, I can set ion-refresher position to relative:

But I’m still left with a 60px gap which is set on the ion-content shadow-root on the main element:

transform: translateY(60px) translateZ(0px); 

Is there a fix or workaround for this? Pulling the refresher out of the component is not a valid solution for me.

Thanks in advance!

1 post - 1 participant

Read full topic