Ionic 5 Popover Position

Question

I am using ion-popover.

In the example in the docs, when you click the three dots at the top right, the popover is shown right next to the clicked button.

What would be a good way of reproducing this? Is there a built-in way of doing it?

Since I didn't find a way, I am trying to set the styles for the popover manually, but that doesnt work either.

My page.ts

const popover = await this.popoverController.create({
  component: OptionsComponent,
  cssClass: 'my-custom-class',
  event: ev
});
return await popover.present();

My global.scss

.my-custom-class .popover-content {
  position: absolute;
  right: 0;
  top: 0;
}

Am I doing something wrong? Is there a better way to approach this?

Pomcroy

Answer 1

It's explained in the docs (emphasis mine) :

To present a popover, call the present method on a popover instance. In order to position the popover relative to the element clicked, a click event needs to be passed into the options of the the present method.

HTML

<div (click)="showPopover($event)">
    <div>AAA</div>
</div>

In your class, pass the event as an argument to your method:

showPopover(event) {
    const popover = await this.popoverController.create({
      event,
      component: OptionsComponent,
      cssClass: 'my-custom-class', // optional
    });
    return await popover.present();
}

No need for extra CSS unless you want to style the content of your modal.

Macrospore

OK thank you! I don't know how I missed that. BUT it is still not working. Let me update the question with the html part – Pomcroy

I must have had something wrong because I checked again and it did work. Thanks! – Pomcroy

The docs are confusing to me though. Where are these options specifically of the 'Present' method? The 'Present' method is called without any options passed. It's being passed into the CREATE method, not the 'Present'? – Trinitarianism

@Trinitarianism Yes, I can't find the documentation online for PopoverController... – Mallina

did you use '$event' like here: showPopover($event) ? It didn't work for me without '$'? – Womankind