web-dev-qa-db-ja.com

ionic単一モーダルの3モーダル全画面幅/高さ？

私はionic modalを使用しています。モーダルのサイズを全画面に変更したいのですが、すべてのモーダルではなく1つのモーダルだけですが、ionic =自体が！important属性を使用して幅/高さのプロパティを設定しています。次のようなものを試してみました

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

これをページのスコープ内に配置しても効果はありませんが、ページのスコープ外に配置すると、アプリ内のすべてのモーダルの幅/高さが変更されます。私はすでにWebを検索して多くの解決策を試しましたが、どれも機能しませんでした（または適切に理解できなかった可能性があります）。この点で助けていただければ幸いです。ありがとう

htmlcssionic-frameworksassionic3
10
Omar Bahir

まず、モーダルのクラスを追加します。

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

注：モーダル要素がページの外部に追加されるため、ページスコープ内でスタイルを設定できません。

10
Duannx

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