ionic 3 modal full screen width/height for a single modal?

Question

I'm working with ionic modal, I want to resize my modal to full screen, not all the modals but only 1 modal but unable to achieve this as ionic itself is setting width/height properties with !important attribute. I've tried to so something like 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 within scope of the page, it doesn't show any effect but when I put this outside of the page's scope, it changes width/height of all the modals in app. I've already searched the web and tried many solutions but none of them worked (or may be I couldn't understand it properly). Any help in this regards would be highly appreciated. Thanks

Answer 1

First, add a class for your modal:

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

Second, now you have my-modal class. Style for it in 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;
    } 
  }
}

Note that: Modal element is added outside your page so you can not style for it inside page scope.

Answer 2

Adding css I think this code works fine.

@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;
      }
    }
  }
}