Ion Refresher Background color wont change ionic

0
votes

I'm using an ionic refresher to refresh content on a page in my application. However, when I pull up the ion-refresher, background does not get fully set to the color I want.

This is a CSS class I'm applying to the ion-refresher:

ion-refresher {
  background-color: #dedede;
}

ion-refresher-content {
  background-color: #dedede;
}

And this it what the result looks like:

enter image description here

How do I remove the white gap between the ion refresher and the main content?

4
ionic-frameworkionic4

4 Answers

4
votes

On Ionic 4, this CSS worked for me:

ion-refresher-content {
  padding-bottom: 200px;
  background-color: yellow;

  .refresher-pulling {
    position: fixed;
    top: 50px;
  }
}

The padding-bottom: 200px; fills up the space to show the yellow color, but it also introduces a new issue. The refresher arrow disappears! In order to keep the arrow in place and make it function normally, the .refresher-pulling and its corresponding styles are added. This way, now the app background color shows without any white gaps and also the spinner stays in place.

Hope this helps someone.

1
votes

When you pull up, one div was been created called fixed-content

enter image description here

For remove the gap just add .fixed-content in your .scss Example:

 .fixed-content{
    background:#dedede;
 }
1
votes

This is what got it working for me. 

ion-refresher-content {
  padding-bottom: 100px;
  background-color: #dedede;
}
0
votes

@devner's solution is not working correctly with iPhone X and kind (i.e. devices with safe-area-inset).

Proper solution (Ionic 4):

ion-refresher-content {
  position: relative;
  padding-bottom: 200px;
  background-color: var(--base-background-color-body);

  .refresher-pulling, .refresher-refreshing {
    position: relative;
    top: 30px;
  }
}

Appendix: best UX on my opinion can be achieved with next HTML:

  <ion-refresher slot="fixed" pullFactor="0.5" (ionRefresh)="onPullToRefresh($event)">
    <ion-refresher-content
      pullingIcon="refresh"
      refreshingSpinner="crescent"
    ></ion-refresher-content>
  </ion-refresher>