Modify position of ion-popover?

Ionic Framework
1

Hello,
I am trying to set the position for my ion-popover content, but the positions is getting automatically calculated in the shadow-root,
ion-popover > #shadow-root (open) > .popover-wrapper > .popover-content {
top: calc(210.5px + var(–offset-y, 0px));
left: calc(12px + var(–offset-x,0px));
transform-origin: left top;
}
this is autogenerated and I am not able to override the position, even if I use ng::deep or !important. I am able to modify the top position in ionic version 5 but not in version 6.

2

give your popover a class, example:

 async presentPopover() {
   this.popover = await this.popoverController.create({
     component: YourPopoverComponent,
     cssClass: 'popover-example-class',
     translucent: false
   });
   await this.popover.present();
 }

then in your global.scss file you can do something like this:

 
.popover-example-class {
  &::part(content) {
    width: calc(100% - 10px) !important;
    max-width: 600px;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

or:

ion-popover.popover-example-class {
  --offset-y: -100px !important;
}

in my css i just added some css rules, write the rules you need

1 Like