【问题标题】：ionic 3 popover is not coming next to buttonionic 3 popover 没有出现在按钮旁边
【发布时间】：2017-09-25 02:40:35
【问题描述】：

我已经完成了 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
  }); 
}

应该这样做，但弹出框相对于图标只是远离了。

【问题讨论】：

你能添加一张它是如何显示的截图吗？
dropbox.com/s/5nkgk7j6qshodeo/…
请edit你的帖子与图片..
对此有什么帮助吗？

标签： ionic3 popover

【解决方案1】：

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

【讨论】：

【解决方案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>

检查documentation here，它显示了一张卡片，其中包含一个物品作为起始卡片元素。

请检查此class="dashboard-widget-card-header" 是否与弹出功能中的options-popover 一起对其进行了处理。

【讨论】：

【解决方案3】：

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

【讨论】：

初始示例中没有 zoom:1.5

【解决方案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
    });
  }

ps : 离子 3

【讨论】：