イオン3 popoverはボタンの隣に来ていません

Question

私はやったことがあります100sの時間であり、期待通りに動作しますが、この場合。

のようにポップオーバーに見える：

<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（$イベント）">

：ポップオーバーを起動するページがどのように見える

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

起動時間は

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

これは実行する必要がありますが、ポップオーバーは単にアイコンに対して相対的にオフになります。あなたはその複雑なグリッドに代わりion-card-headerのion-itemを使用していないのはなぜ

Answer 1

@ Sonicd300で提案されている代替レイアウトを試すことに基づいて、私は最終的に犯人を理解しました。実際にはアイコンスタイルのプロパティzoom：1.5です。私はポップオーバーの位置を乱す理由は分かっていませんが、それを削除するか、1.0に設定するとポップオーバーが正しい位置に移動します

Answer 2

。

<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