离子3 popover不是旁边的按钮

问题描述：

我已经做了100秒的时间，它按预期工作，但只是这种情况。离子3 popover不是旁边的按钮

的酥料饼的样子：

<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（$事件）”>

发射ts是

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

这应该这样做，但弹出窗口只是相对于图标而言。

您可以添加如何显示它的屏幕截图吗？ –

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

请将您的文章与图片联系起来 –

答

因此，根据@ Sonicd300建议的替代布局，我最终明白了罪魁祸首。它实际上是图标样式属性缩放：1.5。我不知道为什么它弄乱了弹出窗口的位置，但删除它或将其设置为1.0将弹出窗口移动到正确的位置

在您的初始示例中没有缩放：1.5 – Sonicd300

答

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

离子3 popover不是旁边的按钮

相关推荐