如何响应地调整离子弹跳位置

Question

page1.html

<ion-icon name="more" click()="goToPopOver($event)"></ion-icon>

page1.ts

//all imports are made
// all instances are created

goToPopOver(event){
   let popover = this.popCtrl.create(PopOverPage, {}, {cssClass: 'popover-custom'});
popover.present({
     ev: event;
})
}

app.scss

  .custom-popover .popover-content {
    width: 60%;
    bottom: 20px;
    height: 20%;
    top: 90px; // is not working 

}

popoverpage.html

<ion-content>
<div>
<div>ABCD</div>
<div>pQRS</div>
</div>
</ion-content>

我想调整页面末尾的弹出窗口，如图所示。

注意：我尝试更改left属性但是根据当前宽度进行了调整，当我增加宽度时，弹出位置不符合给定的要求。

我的popover显示在离子图标上方

必需 - ＆gt;