Popover does not come relative to the clicked link

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-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 col-auto><ion-icon style="color:#8D8D8D;zoom:1.5" name="ios-more" (click)="showOptions($event)"></ion-icon></ion-col>
                </ion-card-content >

the method is:

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


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

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>

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