离子3模态全屏宽度/高度单模态？ [英] ionic 3 modal full screen width/height for a single modal?

问题描述

我正在使用离子模式，我想调整我的模态到全屏，并非所有的模态，但只有1模态，但无法实现这一点，因为离子本身是设置宽度/高度属性！important 属性。我尝试过如下所示：

  @media屏幕和（orientation：landscape）{
 ion- modal {
 .modal-wrapper {
 position：absolute; 
 top：0！important; 
剩下：0！重要; 
 display：block; 
宽度：100％！重要; 
身高：100％！重要; 
} 
} 
} 
  

它没有显示任何效果，但是当我把它放在页面范围之外时，它会改变应用中所有模式的宽度/高度。我已经在网上搜索并尝试了很多解决方案，但都没有工作（或者我可能无法正确理解）。任何在这方面的帮助将不胜感激。谢谢

解决方案

首先，为您的模式添加一个类：

  let modal = this.modalCtrl.create（YourModalPage，null，{
 cssClass：my-modal
}）
 modal.present ）; 
  

其次，现在您有 my-modal 类。在 app.scss 中输入样式：

  @media屏幕和（orientation：landscape）{ 
 .my-modal {
 .modal-wrapper {
 position：absolute; 
 top：0！important; 
剩下：0！重要; 
 display：block; 
宽度：100％！重要; 
身高：100％！重要; 
} 
} 
} 
  

请注意： Modal元素添加到您的页面之外，因此您无法在页面范围内对其进行样式设置。

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

解决方案

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.

这篇关于离子3模态全屏宽度/高度单模态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！