How to position Popover correctly (Ionic3)

Question

I need to position my Popover exactly next to the button (more) you have inside each item. Whenever I click the more button, the Popover is triggered, but it is always in the same position regardless of the item I click. How can I solve this problem? Note: My Popover is a component, I even tried some css stylings, but it was unsuccessful, it keeps fixing the Popover in a single position.

<ion-list>
  <ion-item *ngFor="let item of itens">
    <ion-row>
      <ion-col col-2>
        <ion-avatar item-start>
          <img src="{{item.foto}}" *ngIf="item.foto">
          <img src="../../assets/imgs/sem_foto.png" *ngIf="!item.foto">
        </ion-avatar>
      </ion-col>
      <ion-col col-6>
        <h3>{{item.nome}}</h3>
        <p>Estoque: {{item.quantidadeTotal}}</p>
        <button ion-button outline color="primary"
                icon-only (click)="mostrarGrades(item)">
                Grades
                <ion-icon name="arrow-dropdown"></ion-icon>
        </button>
      </ion-col>
      <ion-col col-2>
        <h4>01/01/2019</h4>
        <h5 *ngIf="item.vlrVenda">R$ {{item.vlrVenda}}</h5>
      </ion-col>
      <ion-col col-1>
        <button ion-button small color="primary" clear
                (click)="popoverAcoesItem(item)">
                <ion-icon name="more"></ion-icon>
        </button>
      </ion-col>
    </ion-row>
    <div *ngIf="item.mostrar">
      <ion-row *ngFor="let grade of item.grades">
        <ion-col col-8>
          <h6>{{grade.nomeComposto}}</h6>
        </ion-col>
        <ion-col col-2>
          <h6>{{grade.quantidade}}</h6>
        </ion-col>
        <ion-col col-2>
          <button ion-button small clear color="dark"
                  (click)="detalhesItemGrade(grade)">
                  Ver tudo
          </button>
        </ion-col>
      </ion-row>
    </div>
  </ion-item>
</ion-list>

What I’ve tried to get you so far:

.popover-top-right .popover-content {
   transform: translateX(10%) !important;
   margin-top: -50px;
 }

It’s getting that way:

1st item on the list :

second item on the list: