Ionic 4 modal size

Ionic Framework
1

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.

2

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 :slight_smile: check if there is some small detail missing elsewhere.

3

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

4

:man_dancing::man_dancing::man_dancing::man_dancing:
Thanks

5

is it possible to place it inside ModalPage.css?

6

great job ! thanks !!!

7

thank you very much! :clap::clap::clap:

8

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!

9

thanks !
:clap::clap::clap::clap::clap::clap:

10

Thanks bro!!!:clap::clap::clap::clap:

11

Works like a charm. Thank you!

Now ideally the CSS variable way of doing this…

12

Put this in your css:

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

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

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