How to center a popover horizontally on iOS?

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

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

2 Likes