Ionic 5 Popover Position

Issue

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?

Solution

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.

Answered By - Sébastien