使用 highcharts 时，为什么 Bootstrap 选项卡会显示宽度不正确的选项卡窗格 div? [英] Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

查看：17
本文介绍了使用 highcharts 时，为什么 Bootstrap 选项卡会显示宽度不正确的选项卡窗格 div?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我正在使用 Twitter 的 Bootstrap 创建一个带有标签内容的页面，但我的起始活动 div 的内容总是与其他标签的内容不同.例如，我在不同的选项卡中使用 highcharts.js 放入图表，但活动的始终显示正确，而其他的宽度不正确.

看看下面的例子:

 
<div class = "span9"><div class = "row-fluid"><h3>测试</h3><ul class="nav nav-tabs">
  • <a data-toggle = "tab" href = "#one">One</a>
    • <li><a data-toggle = "tab" href = "#two">Two</a></li><li><a data-toggle = "tab" href = "#three">三</a></li><div class="tab-content"><div class="tab-pane active" id="one" ><h4>一个</h4><div id = "container1"></div><script type = "text/javascript">$(函数(){$('#container1').highcharts({图表: {},x轴:{类别:['Jan'、'Feb'、'Mar'、'Apr'、'May'、'Jun'、'Jul'、'Aug'、'Sep'、'Oct'、'Nov'、'Dec']},系列: [{数据:[29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}]});});
    <div class="tab-pane" id="two" ><h4>两个</h4><div id = "container2"></div><script type = "text/javascript">$(函数(){$('#container2').highcharts({图表: {},x轴:{类别:['Jan'、'Feb'、'Mar'、'Apr'、'May'、'Jun'、'Jul'、'Aug'、'Sep'、'Oct'、'Nov'、'Dec']},系列: [{数据:[29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}]});});

    <div class="tab-pane" id="three" ><h4>三个</h4><div id = "container3"></div><script type = "text/javascript">$(函数(){$('#container3').highcharts({图表: {},x轴:{类别:['Jan'、'Feb'、'Mar'、'Apr'、'May'、'Jun'、'Jul'、'Aug'、'Sep'、'Oct'、'Nov'、'Dec']},系列: [{数据:[29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}]});});

    <div class = "span3"><p>这是我侧边栏上的内容</p>

    在这种情况下，在页面加载时切换活动选项卡使该图表看起来对我来说是正确的，但其余的总是一直延伸到边缘(对于我的数据，我只想填充空间的span9 div.在这种情况下我只是使用了虚拟图表，但它的想法是一样的.

    这是一个 JSFiddle:http://jsfiddle.net/dw9tn/

    我想问你们的问题是:

    1.) 这只是我吗?

    2.) 当标签被激活时到底发生了什么?查看 bootstrap css，这似乎处理 display: none 和 display: block，但我不太了解在这种情况下是如何工作的.

    3.) 这是 highcharts 问题还是 bootstrap 问题?我注意到这发生在我身上的非高图元素(比如在侧边栏中显示推文)，所以我倾向于引导程序.

    4.) 有没有什么解决方案可以让一切都保持一致?

    谢谢各位！

    解决方案

    原因

    这不是 Highcharts 的问题，至少不是它本身的问题，问题是由 Bootstrap 使用 display: none 来隐藏非活动标签这一事实引起的:

    .tab-content >.tab-pane, .pill-content >.pill 窗格{显示:无；/* 这就是问题 */}

    这会导致 Highcharts 无法获得预期的宽度来初始化图表，因此默认为 600px.使用相同方法隐藏内容的其他工具也会发生这种情况.

    纯 CSS 解决方案

    我们可以使用 height: 0; 来实现隐藏效果，而不是通过额外的重绘或延迟初始化来解决这个问题.溢出-y:隐藏，这样隐藏的标签窗格仍然存在并且具有有效的width:

    /* bootstrap hack:修复隐藏标签内的内容宽度 */.tab-content >.tab-pane:not(.active),.药丸内容>.pill-pane:not(.active) {显示:块；高度:0；溢出-y:隐藏；}/* 自举黑客结束 */

    更新:我们现在通过 :not(.active) 直接定位非活动标签，以避免可能产生的副作用.

    此解决方案是无缝的，因此您不再需要担心图表是否在选项卡窗格内.而且它的效率很高，因为它首先解决了宽度问题，因此之后无需通过使用 javascript 调整大小/重绘/回流来解决宽度问题.

    关于级联顺序的注意事项

    这个补丁需要在引导后 css加载，因为CSS层叠顺序规则，简而言之，后一条规则胜出.

    演示

    之前 vs 之后

    提示:切换到个人资料标签以查看不同之处.

    So I'm creating a page with tabbed content using Twitter's Bootstrap, yet the content of my starting active div is always different than that of my other tabs. For example, I am putting in charts using highcharts.js in my different tabs, yet the active one always shows correctly while the others have an incorrect width.

    Check out the example below:

            <div class = "row-fluid">
        <div class = "span9">
            <div class = "row-fluid">
                <h3>Test</h3>

                    <ul class="nav nav-tabs">
                        <li class = "active">
                            <a data-toggle = "tab" href = "#one">One</a>
                        </li>
                        <li><a data-toggle = "tab" href = "#two">Two</a></li>
                        <li><a data-toggle = "tab" href = "#three">Three</a></li>
                    </ul>

                    <div class="tab-content">

                        <div class="tab-pane active" id="one" >
                            <h4>One</h4>
                            <div id = "container1"></div>
                            <script type = "text/javascript">
                                $(function () {
                                    $('#container1').highcharts({
                                        chart: {
                                        },
                                        xAxis: {
                                            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                                        },
                                        series: [{
                                            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
                                        }]
                                    });
                                });
                            </script>
                        </div>

                        <div class="tab-pane" id="two" >
                        <h4>Two</h4>
                        <div id = "container2"></div>
                        <script type = "text/javascript">
                            $(function () {
                                $('#container2').highcharts({
                                    chart: {
                                    },
                                    xAxis: {
                                        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                                    },
                                    series: [{
                                        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
                                    }]
                                });
                            });
                            </script>
                        </div>

                        <div class="tab-pane" id="three" >
                        <h4>Three</h4>
                        <div id = "container3"></div>
                        <script type = "text/javascript">
                            $(function () {
                                $('#container3').highcharts({
                                    chart: {
                                    },
                                    xAxis: {
                                        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                                    },
                                    series: [{
                                        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
                                    }]
                                });
                            });
                            </script>
                        </div>

                    </div> 
            </div>
        </div>
        <div class = "span3">
            <p>Here is the content on my sidebar</p>
        </div>
    </div>

    In this case, switching the active tab on page load makes that chart look correct for me, but the rest always extend all the way to the edge (In the case of my data, which I want to only fill up the space of the span9 div. I just used dummy charts in this case, but it's the same idea.

    Here's a JSFiddle: http://jsfiddle.net/dw9tn/

    My questions for you all are:

    1.) Is this just me?

    2.) What exactly is going on when tabs are made active? Looking at the bootstrap css, this seems to deal with display: none and display: block, but I don't have a good understanding of how that works in this case.

    3.) Is this a highcharts issue or a bootstrap issue? I noticed this happened to me with non-highchart elements (like showing tweets in the sidebar), so I'm leaning toward bootstrap.

    4.) Is there any solution you can find to make everything consistent?

    Thanks guys!

    解决方案

    The Cause

    This is not a Highcharts issue, at least not by itself, the problem is caused by the fact that Bootstrap uses display: none to hide inactive tabs:

    .tab-content > .tab-pane, .pill-content > .pill-pane {
    display: none;      /* this is the problem */
}

    This causes Highcharts not able to get the expected width to initialize the chart, thus defaults to 600px. This would happen to other tools using the same approach to hide content.

    A Pure CSS Solution

    Instead of working around the issue with an extra redraw or delayed initialization, we can achieve the hidden effect using height: 0; overflow-y: hidden, this way the hidden tab panes are still in place and having valid width:

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

    Update: We now target inactive tabs directly, via :not(.active), to avoid possible side effect if any.

    This solution is seamless, so you no longer have to worry whether the chart is inside a tab-pane or not. And it's efficient as it fixes the width issue in the first place, thus there's no need to workaround the width issue afterward via resize/redraw/reflow using javascript.

    Note about cascading order

    This patch needs to be loaded after bootstrap css, because of CSS cascading order rules, in short, the latter rule wins.

    Demo

    Before vs After

    Tip: switch to the Profile tab to see the difference.

    这篇关于使用 highcharts 时，为什么 Bootstrap 选项卡会显示宽度不正确的选项卡窗格 div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    查看全文
    相关文章
    前端开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆