Ionic 3弹出框不能在按钮旁边显示

Question

我已经做了数百次，而且都能够如预期地工作，只是这种情况除外。

弹出框如下：

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

(点击)="展示选项($event)">

启动ts文件

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

这个应该可以解决，但是弹出框相对于图标的位置有些偏移。

- Vik

---

你能添加一个屏幕截图展示一下吗？ - Suraj Rao

https://www.dropbox.com/s/5nkgk7j6qshodeo/Screenshot%202017-09-24%2021.16.36.png?dl=0 - Vik

请编辑您的帖子并附上图片。 - Suraj Rao

请问有关于这个的任何帮助吗？ - Vik

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>

请查看此处的文档，其中显示了将项目作为起始卡片元素的卡片。

请检查可能是class="dashboard-widget-card-header"与弹出窗口函数中的options-popover一起对其进行操作。

- Sonicd300

Answer 2

根据@Sonicd300建议尝试备选布局后，我最终理解了罪魁祸首。实际上是图标样式属性zoom:1.5。我不知道为什么它会搞乱弹出框的位置，但是将其删除或将其设置为1.0可以使弹出框回到正确的位置。

- Vik

---

你的初始示例中没有zoom:1.5。 - Sonicd300

Answer 3

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

- Wesley Gonçalves

Answer 4

如果你想要弹出框在按钮旁边，就把事件传递给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
    });
  }

提示：Ionic 3

- Francesco Taioli