highchart在bootstrap的Tab组件下容器问题

最新推荐文章于 2019-01-10 19:40:38 发布

三问静先生

最新推荐文章于 2019-01-10 19:40:38 发布

阅读量737

点赞数

分类专栏： Web 文章标签： highchart 容器自适应 web前端 bootstrap

本文链接：https://blog.csdn.net/Longyu144714/article/details/78134930

版权

Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近在使用highchart和bootstrap的时候，出现了问题，当我使用bootstrap的Tab组件时，highchart在渲染的时候其容器的大小无法自适应其中隐藏的Tab下的容器（注：Tab下容器大为动态的），切换Tab时容器的大小不是我想要的，当我移动浏览器界面或者改变浏览器界面大小时，其才会显示在我正真容器大小里面（感觉自己说的好啰嗦），那么怎么让其自适应其隐藏的容器大小呢，下面是我用CSS处理这个问题，代码如下：

/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
    display: block !important;
    height: 0 !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
} 
/* bootstrap hack end */

看了网友的贡献，然后写下来，希望帮到有需要的前端程序猿……