How to add ion-refresher inside subcontent?

@Splinteer wrote:

Hello,

I want my ion-refresher to be inside a subcontainer.
Because I have a image used as background but is in div with position absolute because I can’t add filter and the edit I want with a background-image.

The problem is that when I try to refresh my app. Even if it’s inside the subcontent it add a block in top of the image I used as a background.

Here is my code:

<ion-content>
  <img class="lastpic" src="{{user.lastpic}}">
  <div class="subcontent">
    <ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content refreshingSpinner="dots"></ion-refresher-content>
    </ion-refresher>
    <div class="header">
      <div>
        <img class="profilpic" src="{{user.profilepic}}">
      </div>
    </div>
  </div>
</ion-content>

.lastpic {
  position: absolute;
  z-index: 1;
  mask-image: linear-gradient(to bottom, rgba(var(--ion-color-dark-rgb, 14,21,27),1) 0%, rgba(var(--ion-color-dark-rgb, 14,21,27),0) 75%);
  opacity: 0.7;
}

.subcontent {
  position: absolute;
  z-index: 2;

  .header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(60px, auto);
    box-sizing: border-box;
    padding: 10px;
    align-items: center;
    text-align: center;
    img.profilpic {
      width: 100px;
      border-radius: 100%;
    }
  }
}

Posts: 1

Participants: 1

Read full topic