iview的tab组件切换隐藏元素无法获取高度问题

文章讨论了在使用Echarts图表时遇到的一个常见问题,即切换Tab时图表元素被隐藏造成样式异常。通过修改CSS样式,特别是使用`position:absolute`和`display:block!important`来重写默认的`display:none`,并利用定位方法使元素看似隐藏,从而保持页面样式的正常。这种方法可以有效地解决Echarts在Tab组件中的显示问题。
摘要由CSDN通过智能技术生成

在tab中使用echart图表,切换时tab时元素被隐藏导致样式异常。

 上图中可以看到是通过display:none样式隐藏了页面,可以通过重写display样式覆盖掉,然后通过定位的方式隐藏。如下图所示。

  .ivu-tabs-content {
    position: relative;
    .ivu-tabs-tabpane {
      height: 100%;
      position: absolute;
      display: block!important;
    }
  }

通过定位让元素看起来隐藏掉,那么就可以正常获取到页面的样式了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值