ionic 5 open modal in full screen without changing other modal-CodePudding

Is it possible to open a particular modal in full screen without affecting other modals. I can apply the style to modal-wrapper in global.scss but that applies to all the modals in app which is not what I want. I only need to open two or three modals into full-screen rest needs to stay in default size.

It's not an issue on a small screen as it's by default full screen on the small screen but on a bigger screen, they are not full screen.

Here's my code sample

https://stackblitz.com/edit/ionic-angular-v5-modal-ehedzz?file=src/app/app.component.ts

Thanks

CodePudding user response：

Put your style for custom classes into global.scss. Like this:

.dialog-fullscreen .modal-wrapper {
  width: 100%;
  height: 100%;
}

dialog-fullscreen is my-custom-class in your code

CodePudding user response：

Just in case if someone else having same issue, just add this in global.scss

 .fullscreen {
      --width:100% !important;
      --height:100% !important;
  }

 const modal = await this.modalController.create({
      component: NewModalPage,
      cssClass: 'fullscreen'
    });