# How to make popover on the screen bottom

**URL:** <https://forum.ionicframework.com/t/how-to-make-popover-on-the-screen-bottom/125203>\
**Category:** ionic-v3\
**Created:** [March 20, 2018, 4:50am UTC](https://forum.ionicframework.com/t/how-to-make-popover-on-the-screen-bottom/125203 "2018-03-20T04:50:06Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jamesionic](https://avatars.discourse-cdn.com/v4/letter/j/8edcca/32.png) [@Jamesionic](https://forum.ionicframework.com/u/Jamesionic)\
**Post date:** [March 20, 2018, 4:50am UTC](https://forum.ionicframework.com/t/how-to-make-popover-on-the-screen-bottom/125203/1 "2018-03-20T04:50:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![pannemann](https://avatars.discourse-cdn.com/v4/letter/p/439d5e/32.png) [@pannemann](https://forum.ionicframework.com/u/pannemann)\
**Post date:** [March 20, 2018, 10:42pm UTC](https://forum.ionicframework.com/t/how-to-make-popover-on-the-screen-bottom/125203/2 "2018-03-20T22:42:29Z")

</div>

Did you try the following?  
Position:absolute;  
Left: 50%;  
Bottom:0;

---

<div class="post-metadata">

**Author:** ![Jamesionic](https://avatars.discourse-cdn.com/v4/letter/j/8edcca/32.png) [@Jamesionic](https://forum.ionicframework.com/u/Jamesionic)\
**Post date:** [March 20, 2018, 11:31pm UTC](https://forum.ionicframework.com/t/how-to-make-popover-on-the-screen-bottom/125203/3 "2018-03-20T23:31:32Z")

</div>

thanks.

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

---

<div class="post-metadata">

**Author:** ![pannemann](https://avatars.discourse-cdn.com/v4/letter/p/439d5e/32.png) [@pannemann](https://forum.ionicframework.com/u/pannemann)\
**Post date:** [March 21, 2018, 7:21am UTC](https://forum.ionicframework.com/t/how-to-make-popover-on-the-screen-bottom/125203/4 "2018-03-21T07:21:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![hirenkorat3](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/hirenkorat3/32/128872_2.png) [@hirenkorat3](https://forum.ionicframework.com/u/hirenkorat3)\
**Post date:** [March 21, 2018, 8:51am UTC](https://forum.ionicframework.com/t/how-to-make-popover-on-the-screen-bottom/125203/5 "2018-03-21T08:51:30Z")

</div>

try this css

```auto
.popover-content{
    top:50%!important;
    bottom: 0px!important;
    left: 105px!important;
}

```

---

<div class="post-metadata">

**Author:** ![ioclaudio](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ioclaudio/32/126373_2.png) [@ioclaudio](https://forum.ionicframework.com/u/ioclaudio)\
**Post date:** [May 6, 2019, 10:46pm UTC](https://forum.ionicframework.com/t/how-to-make-popover-on-the-screen-bottom/125203/6 "2019-05-06T22:46:16Z")

</div>

Hi,  
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:

```auto
  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:

```auto
.device-detail-popover{
  position: absolute;
  bottom: 0px !important;
}

```

and this

```auto
.device-detail-popover{
    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.

cld

---

<div class="post-metadata">

**Author:** ![shyamdx](https://avatars.discourse-cdn.com/v4/letter/s/b2d939/32.png) [@shyamdx](https://forum.ionicframework.com/u/shyamdx)\
**Post date:** [July 18, 2019, 2:01pm UTC](https://forum.ionicframework.com/t/how-to-make-popover-on-the-screen-bottom/125203/7 "2019-07-18T14:01:21Z")

</div>

You can use this code on global.scss (for Ionic 4)

```auto
.popover-content.sc-ion-popover-md {
  top: 328px !important;
  margin-top: 116%;
  position: initial;
  width: 362px;
  top: 0px; 
  left: 0px; 
  right: 0px;
  transform-origin: left top;

```

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:44pm UTC](https://forum.ionicframework.com/t/how-to-make-popover-on-the-screen-bottom/125203/8 "2021-07-19T21:44:24Z")

</div>

Closed on July 19, 2021, 9:44pm UTC