Ionic 3-modal width / height of the entire screen for one modal?

Question

I work with ionic modal, I want to resize my modal to full screen, not all modal, but only 1 modal, but unable to achieve this, since ionic itself sets the width / height parameters with ! important . I tried to do something like the following

 @media only screen and (orientation: landscape)  {
   ion-modal {
    .modal-wrapper {
      position: absolute;
      top: 0 !important;
      left: 0 !important;
      display: block;
      width: 100% !important;
      height: 100% !important;
    } 
  }
}

when I put this in the page visibility, it has no effect, but when I put it out of the page area, it changes the width / height of all the modals in the application. I already searched the Internet and tried many solutions, but none of them worked (or maybe I could not understand it correctly). Any help in this regard would be greatly appreciated. Thanks

Answer 1

:

let modal = this.modalCtrl.create("YourModalPage", null, {
    cssClass:"my-modal"
})
modal.present();

-, my-modal. app.scss:

 @media only screen and (orientation: landscape)  {
   .my-modal {
    .modal-wrapper {
      position: absolute;
      top: 0 !important;
      left: 0 !important;
      display: block;
      width: 100% !important;
      height: 100% !important;
    } 
  }
}

, : , .

Answer 2

css , .

@media only screen and (orientation: landscape)  {
   ion-modal {
    .modal-wrapper {
      .modal {
        position: absolute;
        top: 0 !important;
        left: 0 !important;
        display: block;
        width: 100% !important;
        height: 100% !important;
      }
    }
  }
}