echarts全屏之后大小高度宽度滞后问题,全屏之后重置大小

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echarts全屏之后大小高度宽度滞后问题,全屏之后重置大小相关的知识,希望对你有一定的参考价值。

参考技术A 或者添加这个

单个模态的离子3模态全屏宽度/高度?

【中文标题】单个模态的离子3模态全屏宽度/高度?【英文标题】:ionic 3 modal full screen width/height for a single modal? 【发布时间】:2018-04-20 20:23:31 【问题描述】:

我正在使用 ionic 模态,我想将我的模态调整为全屏,不是所有模态,而是只有 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;
     
  

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

【问题讨论】:

【参考方案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;
     
  

请注意:模态元素被添加到您的页面之外,因此您无法在页面范围内为其设置样式。

【讨论】:

【参考方案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;
      
    
  

【讨论】:

请再次阅读问题。我能够实现 css 以使模态全屏显示,我在问如何将这种样式专门应用于仅一个模态。

以上是关于echarts全屏之后大小高度宽度滞后问题,全屏之后重置大小的主要内容,如果未能解决你的问题,请参考以下文章

如何通过单击按钮调整 div 大小并变为全屏

点击按钮全屏,按esc退出全屏

DIV高度怎么设置全屏?

单个模态的离子3模态全屏宽度/高度?

echarts滚动条高度和字体大小

仅背景大小宽度