Ионный 3 popover не приближается к кнопке

Я сделал 100 секунд, и он работает как ожидалось, но только в этом случае.

popover выглядит так:

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

страница, запускающая popover, выглядит так:

<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"

(нажмите) = "showOptions ($ событий)" >

Запуск ts

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

Это должно сделать это, но popover просто отходит от значка.

Ответ 1

Итак, основываясь на попытке альтернативного макета, предложенном @Sonicd300, я в конце концов понял преступника. Это на самом деле свойство свойства стиля значка: 1.5. Я не знаю, почему это помешает позиции popover, но удалив ее или установив ее в 1.0, верните popover в нужную позицию.

Ответ 2

Почему бы вам не использовать ion-item вместо ion-card-header с этой сложной сетью.

<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>

Проверьте здесь, в нем отображается карта с элементом в качестве элемента стартовой карты.

Пожалуйста, проверьте, может быть, это class="dashboard-widget-card-header" что-то делает с ним, а также с функцией popover: options-popover.