How to adjust the ionic popover position responsively

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>

I want to adjust the pop over at the end of the page as displayed in the diagram.

Note: I tried changing the left property but it adjusted according to the present width, when I increase the width the pop over position is not as per given requirements.

My popover is displaying on above the ion-icons

Required ->

Answer 1

seems like class not working with popover you need to use id

something like this

<ion-popover trigger="side-button" id="popover-bottom">
  <ng-template>
    <ion-content>

      <ion-item>
        Popover Content
      </ion-item>
      <ion-item>
        Popover Content
      </ion-item>
      <ion-item>
        Popover Content
      </ion-item>
      <ion-item>
        Popover Content
      </ion-item>

    </ion-content>
  </ng-template>
</ion-popover>






 ion-popover#popover-bottom::part(content) {
  top: unset !important;
  left: 0 !important;
  bottom: 50;
  width: 100vw;
  border-radius: 10;
}