web-dev-qa-db-fra.com

ionique 3 modal plein écran largeur/hauteur pour un seul modal?

Je travaille avec modal ionique, je souhaite redimensionner mon modal en plein écran, pas tous les modaux, mais seulement un modal, mais incapable d'y parvenir, car ionique lui-même définit les propriétés width/height avec! Important attribute. J'ai essayé de suivre quelque chose comme

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

lorsque je mets cela dans le champ de la page, cela ne montre aucun effet, mais lorsque je le mets en dehors du champ de la page, cela change la largeur/hauteur de tous les modaux dans l'application. J'ai déjà effectué des recherches sur le Web et essayé de nombreuses solutions, mais aucune d'entre elles n'a fonctionné (ou je ne peux peut-être pas le comprendre correctement). Toute aide à cet égard serait très appréciée. Merci

htmlcssionic-frameworksassionic3
5
Omar

Premièrement, ajoutez une classe pour votre modal:

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

Deuxièmement, vous avez maintenant la classe my-modal. Style pour cela dans 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;
    } 
  }
}

Notez que: L'élément modal est ajouté en dehors de votre page afin que vous ne puissiez pas le styler dans la portée de la page.

7
Duannx

Ajout de css Je pense que ce code fonctionne bien.

@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;
      }
    }
  }
}
1
Swapnil Kadam