Popover does not come relative to the clicked link

Ionic Framework ionic-v3
1

i have this strange issue where popup always comes way off the clicked link.
the code of base page looks like:

  <ion-card-content *ngIf="expanded == true" style="height: 290px">
                  <ion-grid>
                      <ion-row no-padding style="border-top:1px solid #AFAFAF" text-wrap 
                               *ngFor="let appointment of appointments">
                          <ion-col col-auto><ion-icon name="calendar" style="color:#AFAFAF"></ion-icon></ion-col>
                          <ion-col > <ion-label class="widget-para-text" style="font-weight:bold">{{appointment.time}}</ion-label>
                                     <ion-label class="widget-para-title">{{appointment.title}}</ion-label>
                                     <ion-label class="widget-para-text">{{appointment.location}}</ion-label>
                          </ion-col>
                          <ion-col col-auto><ion-icon style="color:#8D8D8D;zoom:1.5" name="ios-more" (click)="showOptions($event)"></ion-icon></ion-col>
                      </ion-row>
                  </ion-grid>
                </ion-card-content >

the method is:

showOptions(myEvent){
     var popover = this.aptOptionsPopup.create(MyAppointmentOptionsPage, {}, { cssClass: 'options-popover'});
        
        popover.present({
          ev:myEvent
        });

  }

and the popup comes like this screenshot from the 3 dot icon.

2

I would wrap the icon in an icon-only ion-button:

  <ion-col col-auto>
    <button ion-button icon-only (click)="showOptions($event)">
      <ion-icon style="color:#8D8D8D;zoom:1.5" name="ios-more"></ion-icon>
    </button>
  </ion-col>

I would also recommend adding a class to the button, instead of using in-line styles on the icon.