Ionic 3 - I want a modal screen not full size

Question

I need a modal page with no full size (80% width, <60% height, centered) to select some items, like an alert control. How to implement the CSS for this case?

Answer 1

Initialize modal with cssClass

 let modal = this.modalCtrl.create(CustomSelectPage, {data: data}, {cssClass: 'select-modal' });

Then add CSS to the class in app.scss

.select-modal {
   background: rgba(0, 0, 0, 0.5) !important;
   padding: 20% 10%  !important;
}

Change the numbers according to your design.

Answer 2

put this code only in your component css file

::ng-deep .sc-ion-modal-md-h {
--width: 90%;
--height: 70%;
  }

Answer 3

in TS file:

  async MyModal() {
    const modal = await this.modalController.create({
      component: MyModalPage,
      backdropDismiss: true,
      cssClass: 'my-modal',
    });
    return await modal.present();
  }

in SCSS file:

.my-modal {
  --width: 70%;
  --height: 35%;
}