How can I move vertically a PopoverController

Ionic Framework
1

In my application, I use a button to display a popover from another page.

The popover is centered both horizontally and vertically in the window, which causes it to extend beyond the window if it is too tall.

Is there a way to better adjust the vertical position of the popover?

I have tried using the properties popover.side, popover.alignment, popover.reference, and popover.keepContentsMounted, but I have not seen any change in behavior.

This is the code for the button

async columnSelect() {
    const popover = await this.popoverController.create({
      component: ColumnSelectComponent,
      componentProps: {
        columns: this.columns,
        allColumns: this.allColums,
      },
      backdropDismiss: true,
      translucent: true,
    });
    popover.style.cssText = '--min-width: 300px;';
    await popover.present();
    await popover.onWillDismiss();
    this.columns = this.varServ.popoverValue;
  }

This is the css for the popover

.sc-ion-select-popover {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  --inner-border-width: 0;
}
ion-popover .popover-viewport {
  display: contents;
}
.popover-viewport .popover-content {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

This is how the popover is show

image
image969×572 22.9 KB

2

You need to add cssClass property when creating popover.

const popover = await this.popoverController.create({
      cssClass: 'my-popover',
});

then use that class within the globals.scss file. More info in the docs.

3

Thanks

Using that and --offset-y: -310px; in the css kinda fixed the problem.

Will try to find a better way to do it, but for now it works.

1 Like