Ionic 4 modal size

[osmarjunior]

Hi, I’m trying to change the height of a modal with css but it’s not working. In v3 this code worked:

ion-modal {
    position: absolute;
    top: 80%;
    display: block;
    height: 20%;
}

In v4 I tried like this (shared-modal is de cssClass defined for the modal):

.share-modal .modal-wrapper {
  --height: 20%;
  position: absolute; 
  top: 80%;
  display: block;
}

Is there a way to change de size of modal in ionic 4? Thanks.

[JensOlleOlsson]

Hi!

This is my working example below in Ionic 4. Have you added the css-style in global.scss?

For example, in your ts.file:

constructor (private modalController: ModalController) {
}

async openMyModal() {
  const myModal = await this.modalController.create({
    component: MyModalPage,
    cssClass: 'my-custom-modal-css'
  });
  return await myModal.present();
}

Then in your scss (preferably your global.scss/app.scss:

.my-custom-modal-css .modal-wrapper {
   height: 20%;
   top: 80%;
   position: absolute; 
   display: block;  
}

This should absolutely work check if there is some small detail missing elsewhere.

[osmarjunior]

Thanks, I’ve tried to put this in everywhere but global.scss, and there it’s worked.

[patrickSiyou]

Thanks

[sonicwong]

is it possible to place it inside ModalPage.css?

[Mejdan]

great job ! thanks !!!

[fcsalmeida]

thank you very much!

[tbaumer22]

This helped so much. I was seeing alternative suggestions of using popups instead of modals, but this trick did exactly what I was looking for. Thanks!

[abdelaliio]

thanks !

[gcoutinho2]

Thanks bro!!!

[Tommertom]

Works like a charm. Thank you!

Now ideally the CSS variable way of doing this…

[jchavezsperu]

Put this in your css:

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

[danielmm1997]

.modal-wrapper {
  --width: 60%;
  --height: 70%;
}

[basti]

With height:100% the modal overlaps the ios-Status-Bar. Do you also have an idea for this?
Thanks!