ionic 3 popover is not coming next to button

So based on trying the alternative layout as suggested by @Sonicd300 I ultimately understood the culprit. It is the actually the icon style property zoom:1.5. I don't know why it messes up the popover position but removing it or setting it to 1.0 bring the popover to the correct position

In Ionic 5

Using the @TaioliFrancesco example,

home.html

<ion-button (click)="presentRadioPopover($event)">
  <ion-icon name="more" slot="icon-only"></ion-icon>
</ion-button>

home.ts

async presentRadioPopover(ev: any) {
  const popover = await this.popoverCtrl.create({
    component: HomepopoverPage,
    event: ev,
  });
  
  return await popover.present();
}

Why don't you use an ion-item instead of the ion-card-header with that complex grid.

<ion-card class="dashboard-widget-layout dashboard-widget">

    <ion-item>
      New Leads
      <ion-icon name="ios-more" item-end (click)="showOptions($event)"></ion-icon>
    </ion-item>

</ion-card>

Check the documentation here, it shows a card with an item as a starting card element.

Please check maybe this class="dashboard-widget-card-header" is doing something to it along with the one in the popover function: options-popover.