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"

（点击）="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" 是否与弹出函数中的函数一起对它做了一些事情：options-popover。

Answer 2

因此，根据 @Sonicd300 所建议的尝试替代布局，我最终理解了罪魁祸首。它实际上是图标样式属性 zoom:1.5。我不知道为什么它会弄乱弹出窗口的位置，但删除它或将其设置为 1.0 会将弹出窗口带到正确的位置

Answer 3

如果你想要按钮旁边的弹出窗口，将事件传递给函数 create()，就像这样

//home.html

<button ion-button icon-only (click)="presentRadioPopover($event)">
        <ion-icon name="more"></ion-icon>
 </button>

//home.ts

 presentRadioPopover(event) {
    const popover = this.popoverCtrl.create(HomepopoverPage);
    popover.present({
      ev: event
    });
  }

ps : 离子 3

Answer 4

在离子 5 中

使用@TaioliFrancesco 示例，

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

ionic 3 popover 没有出现在按钮旁边

ionic 3 popover is not coming next to button

ionic3

popover

在离子 5 中