ionic 3 popover is not coming next to button

Question

I have done is 100s of time and it works as expected but just this case.

the popover looks like:

<ion-content style="padding:5px">
  <ion-label class="menu-options-link" (click)="doneTask()">Accept New Leads</ion-label>
</ion-content>

the page launching the popover looks like:

<ion-card class="dashboard-widget-layout dashboard-widget">
  <ion-card-header class="dashboard-widget-card-header">
    <ion-grid>
      <ion-row>
        <ion-col>
          <ion-label class="dashboard-widget-header">New Leads</ion-label>
        </ion-col>
        <ion-col col-auto>
          <ion-icon name="ios-more" style="zoom:1.5"

(click)="showOptions($event)">

The launching ts is

showOptions(myEvent){
  //alert('hey')
  var popover = this.leadOptionsPopup.create(LeadOptionsPage, {}, { cssClass: 'options-popover'});    
  popover.present({
    ev: myEvent
  }); 
}

This should do it but the popover simply comes way off relative to the icon.

Answer 1

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();
}

Answer 2

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.

Answer 3

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