ionic 3 popover is not coming next to button

user_135982 0
Viewed 2662

I have done is 100s of time and it works as expected but just this case.

the popover looks like: 

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

the page launching the popover looks like:

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

The launching ts is

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

This should do it but the popover simply comes way off relative to the icon.

screenshot to see how it opens

ionic3 popover
4 Answers

Why don't you use an ion-item instead of the ion-card-header with that complex grid.

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

Check the documentation here, it shows a card with an item as a starting card element.

Please check maybe this class="dashboard-widget-card-header" is doing something to it along with the one in the popover function: options-popover.

user_13038970

So based on trying the alternative layout as suggested by @Sonicd300 I ultimately understood the culprit. It is the actually the icon style property zoom:1.5. I don't know why it messes up the popover position but removing it or setting it to 1.0 bring the popover to the correct position

user_1359820

In Ionic 5

Using the @TaioliFrancesco example,

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

if you want the popover next to te button, pass to the function create() the event, like this

//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 : ionic 3

user_57235240
Related