# Popover position and transition

**URL:** <https://forum.ionicframework.com/t/popover-position-and-transition/55259>\
**Category:** ionic-v3\
**Created:** [June 20, 2016, 8:42am UTC](https://forum.ionicframework.com/t/popover-position-and-transition/55259 "2016-06-20T08:42:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jack\_h](https://avatars.discourse-cdn.com/v4/letter/j/7ea924/32.png) [@Jack\_h](https://forum.ionicframework.com/u/Jack_h)\
**Post date:** [June 20, 2016, 8:42am UTC](https://forum.ionicframework.com/t/popover-position-and-transition/55259/1 "2016-06-20T08:42:52Z")

</div>

Hello, EveryOne,  
I’m trying to use ionic2 to create my new app, I use Popover components, but I have a problem with setting the position of popover, I wanna to set popover at the bottom and slide up to present. Now I use the below code to set the position.

```auto
export class MyPopover {
    private selectContent;
    ngOnInit() {
        this.popoverContent = document.querySelector('.popover-content')
    }
    onPageDidEnter() {
        this.selectContent.style.bottom = 0
        this.selectContent.style.left = 0
        this.selectContent.style.top = 'auto'
    }
}

```

The problem is the popover will jump to bottom, I try to figure out a better to way to show popover with transition, anyone have idea? tks

---

<div class="post-metadata">

**Author:** ![Jack\_h](https://avatars.discourse-cdn.com/v4/letter/j/7ea924/32.png) [@Jack\_h](https://forum.ionicframework.com/u/Jack_h)\
**Post date:** [June 20, 2016, 9:50am UTC](https://forum.ionicframework.com/t/popover-position-and-transition/55259/2 "2016-06-20T09:50:50Z")

</div>

em… After some search, I think I find out a way to resolve this problem, but I don’t think it’s a smart way.  
I read code of Popover component find there is no API to change the position of Popover before rendering, the only way is to rewrite the Popover render class. So… more complex but worked

---

<div class="post-metadata">

**Author:** ![Corin](https://avatars.discourse-cdn.com/v4/letter/c/6de8d8/32.png) [@Corin](https://forum.ionicframework.com/u/Corin)\
**Post date:** [October 26, 2016, 8:37am UTC](https://forum.ionicframework.com/t/popover-position-and-transition/55259/3 "2016-10-26T08:37:18Z")

</div>

> [@Popover styling](https://forum.ionicframework.com/t/popover-styling/59341):
>
> I am trying to use popOver on a page with the popOver having a few icons. Everything is working fine except that I cannot increase the width of the popover and I get a scroll bar at the bottom if I increase the width in the style sheet. I am using ionic2 with the following method: presentPopover(myEvent) { let popover = Popover.create(PopoverPage); this.nav.present(popover, { ev: myEvent }); } and the template for the popover is: (pls note that I have replaced \< and \> with…