Increase size of modalController window

Ionic Framework
1

I have an application where I want display a popup using the modalController, and when on a tablet, I would like to have this bigger than the default values.

Looking in devtools, I can see the height and width set at the following…

image
image.png1813×688 159 KB

As can be seen I have set the width to 90% in the devtools, and this has made the popup wider.

So, not worrying about the media query yet, just to see if it would work, I added the following to the pages sccs file, but it did not seem to get applied…

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

Does anyone know why this did not work, and how I can do this?

Thanks in advance for any suggestions!

2

To answer my own question, can do the following…

Add the following to variables.sccs

.large-popup {
    .modal-wrapper {
      width: 90%;
      height: 90%;
     }   
    }

And then pass this class name to the create method…

const modal = await this.modalController.create({
        component: MyComponent,
        cssClass: 'large-popup',  // <-------- add this
      });