css Question posted in
Some basic documentation can be found here.

Css – ionic controlling height of controller modal

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

enter image description here

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search