How to center a popover horizontally on iOS?

Ionic Framework ionic-v3
1

Hi,
I’d like to center a popover horizontally.

With this code:

  async popupTerms() {
  
    const popover = await this.popoverController.create({
      component: TermsPopupPage,
      event: ev,
      translucent: false,
      cssClass: 'terms-popover',
      showBackdrop: true,
      backdropDismiss: false,
    });
	
    return await popover.present();
  }

and this CSS:

   .terms-popover{
   --width: 90%;
   position: absolute;
 }

The popover is centered horizontally on Android, but not on iOS.
How can I center the popover on both Android and iOS?

Thank you very much

cld

1 Like
2

Probably I’ve found the solution in this post:

ion-popover {
  div.popover-content {
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
}

cld

3 Likes
3

I know the post is old but for Ionic 6 it can be solved via ShadowDOM:

ion-popover.ios::part(content) {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
1 Like