ionic3 - ionic 3 popover 不在按钮旁边

Question

我已经完成了 100 秒的时间，它按预期工作，但只是这种情况。

弹出框看起来像:

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

启动弹出窗口的页面如下所示:

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






启动 ts 是

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

这应该可以，但弹出框相对于图标来说只是遥遥无期。

Answer 1

为什么不使用 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>

检查 documentation here ，它显示了一张卡片，其中有一个项目作为起始卡片元素。

请检查这个 class="dashboard-widget-card-header"正在对它和 popover 函数中的那个一起做一些事情: options-popover .