ionic controlling height of controller modal

Question

i am using a controller popup launching like this

 async openNwInsights(){
    const modal = await this.modalCtl.create({
      component: ExplainNetworthComponent
    })

    modal.present();
    const { data, role } = await modal.onWillDismiss();
  }

the HTML for this component is like this

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button (click)="cancel()"><ion-icon name="arrow-back-outline"></ion-icon></ion-button>
    </ion-buttons>
    <ion-title></ion-title>
    <ion-buttons slot="end">
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  This is how it is suppose to be
</ion-content>

When it is launched it takes the entire screen. What I want is to take it just the middle part with some fix height. There is an example of inline modal on ionic site which does exactly what I want. Just not sure how to replicate as I am not using the ion-model tag.

reference: https://ionicframework.com/docs/api/modal

Answer 1

One possible fix is to set the --max-width CSS variable to 300px or whatever you prefer.

CSS:

ion-modal.custom-size {
  --max-width: 300px;
}

HTML:

  <ion-modal #modal trigger="open-modal" class="custom-size">
    <ng-template>
      <ion-content>
        ...

Stackblitz Demo

Answer 2

You can use inline modals as explained in other answer but if you still want to use contoller Modal then add css like this:

 async openNwInsights(){
    const modal = await this.modalCtl.create({
      component: ExplainNetworthComponent,
      cssClass: 'my-custom-class',  //add your class.
    })

    modal.present();
    const { data, role } = await modal.onWillDismiss();
  }

in global.css

.my-custom-class{
  --max-height: 350px; //  as you required
}