How to make popover on the screen bottom

Hi Everyone,

I can css the popover on top with .popover-style{position:0px; top:100px}, but how can I specify the popover position from bottom to let it show on the screen bottom.

I tried .popover-style{position:0px; bottom:100px}, but it does not work.

Any thought,thanks.

Did you try the following?
Left: 50%;


Tried, but still not work, it still shows on the center of screen not the bottom of screen.

Have you already inspected your popover. Maybe there are other rules overriding yours?

try this css

    bottom: 0px!important;
    left: 105px!important;

I have the same problem.
I’d like to show a popover at the bottom of a screen as it was a toast.
I can’t use a toast because it is a complex box and I need a real page to implement all these features.

I’ve created the popover in this way:

  async presentPopoverDeviceDetail(deviceId: number, ev: any) {
    const popover = await this.popoverController.create({
      component: DeviceDetailPage,
      event: ev,
      translucent: false,
      componentProps: {
        device_data: JSON.stringify(device)
    cssClass: 'device-detail-popover'
    return await popover.present();

I’ve tried this CSS:

  position: absolute;
  bottom: 0px !important;

and this

    top: 10%!important;
    bottom: 0px!important;

but the first doesn’t move the popover and the second moves it down, but it does not align it at the bottom of the page.
Has anyone already faced this problem?

Thank you very much.


You can use this code on global.scss (for Ionic 4) {
  top: 328px !important;
  margin-top: 116%;
  position: initial;
  width: 362px;
  top: 0px; 
  left: 0px; 
  right: 0px;
  transform-origin: left top;
1 Like