Ionic 4 custom popup showing bottom of screen on first time

@umaiz33 wrote:

I am using my custom popup with popupcontroller. Problem is when popup is opening first time in app. then its showing in end of screen but on second time view its showing in center. I need it to show always center not on bottom or end.

Here is my code

home.ts

  async presentPopover(popData) {
    const popover = await this.popoverController.create({
      component: RedeemPopupComponent,
       componentProps: {
        "title": popData.title,
        "sub": popData.sub,
        "img": popData.img,
        "button": popData.button,
      },
      translucent: true,
      backdropDismiss: false
    });
    return await popover.present();
  }

popup.html

Here is my code

home.ts

  async presentPopover(popData) {
    const popover = await this.popoverController.create({
      component: RedeemPopupComponent,
       componentProps: {
        "title": popData.title,
        "sub": popData.sub,
        "img": popData.img,
        "button": popData.button,
      },
      translucent: true,
      backdropDismiss: false
    });
    return await popover.present();
  }

popup.html

<ion-card style="background-color: white; border-color: 2px solid #1d808c">


    <div style="text-align: right;" (click)="cancel()">
        <ion-icon name="close" style="font-size: 25px;" color="secondary"></ion-icon>
    </div>

      <div style="text-align: center;" *ngIf="img">
        <img src="{{img}}">
      </div>
      <h3 class="ion-margin-top ion-text-center"  style="color: #1d808c" *ngIf="title">
        {{title}}
      </h3>
      <h5 class="ion-text-center"   style="color: #1d808c" *ngIf="sub">
        {{sub}}
      </h5>

    <div style="margin-top: 30px;text-align: center;" *ngIf="button == 'CLOSE'">
      <ion-button color="secondary" style="font-size: 20px;width: 140px;height: 56px;--border-radius: 140px !important;font-weight: 600;text-transform: none;" (click)="cancel()">{{button}}</ion-button>
    </div>
    <div style="margin-top: 30px;text-align: center;" *ngIf="button == 'REDEEM'" (click)="redeem()">
      <ion-button color="secondary" style="font-size: 20px;width: 140px;height: 56px;--border-radius: 140px !important;font-weight: 600;text-transform: none;" (click)="cancel()">{{button}}</ion-button>
    </div>
</ion-card>

Also attach the image its show the popup in bottom only for first time when its open after open whn ill open second time its showing in center

Bs4Qo