dotnet highchart asp.net with nav tabs bootstrap答案

【问题标题】：dotnet highchart asp.net with nav tabs bootstrapdotnet highchart asp.net with nav tabs bootstrap
【发布时间】：2017-01-15 14:44:12
【问题描述】：

有一些事情我想问一下，例如，当我想使用此参考 https://codepen.io/wizly/pen/BlKxo/ 显示时，这是我的代码使用 dotnet highcharts 或 highcharts

 <div class="container"><h2>Example 3 </h2></div>
        <div id="exTab3" class="container"> 
        <ul  class="nav nav-pills">
            <li class="active">
                <a  href="#1b" data-toggle="tab">Tab 1</a>
            </li>
            <li>
                <a href="#2b" data-toggle="tab">Tab 2</a>
            </li>
        </ul>

        <div class="tab-content clearfix">
            <div class="tab-pane active" id="1b">
                <div id=" chartContainerPies" style="width:100%;height:600px;">
                    <asp:literal id="chartContainerPie" runat="server" ></asp:literal>
                </div>
            </div>
            <div class="tab-pane" id="2b">
                <div id="chartContainerColumns" style="width:100%;height:500px;">
                    <asp:Literal id="chartContainerColumn" runat="server"></asp:Literal>
                </div>
            </div>
        </div>
    </div>

此编码的结果将显示在网络浏览器中

但是，第二个导航选项卡结果变成了这个。如您所见，图表的大小缩小为原始图表的 50%。

问题是如何使第二个选项卡中的结果与第一个选项卡明显相似？对这个问题有什么建议吗？非常感谢你

更新：在我放了边界之后，这就是结果

【问题讨论】：

For div id="2b" 你能把这个：style="border: solid" 看一下 div 的边界在哪里，然后也为这个id="chartContainerColumns" 做。我通常在开发过程中这样做以查看问题所在。通常，它可以帮助我将问题缩小到特定项目。
我已根据您的关注更新了结果。是因为活动课还是什么？
这表明它与另一个选项卡的大小相同。现在对子控件执行相同的操作，看看哪个不同，这样您就可以看到特定项目的问题是什么。
它们的大小相同，我没有在它们上面放任何 css，所以这是纯粹基于 codepen。我想这是关于他们行为中的表演和活跃的阶级
stackoverflow.com/questions/17206631/… 答案就在这里

标签： c# html css asp.net dotnethighcharts

【解决方案1】：

这篇文章是 ryenus 的直接回答 Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

原因

这不是 Highcharts 的问题，至少不是本身的问题，问题是由于 Bootstrap 使用 display: none 来隐藏非活动标签：

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

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

纯 CSS 解决方案

我们可以使用 height: 0; 来实现隐藏效果，而不是通过额外的重绘或延迟初始化来解决这个问题。 overflow-y: hidden，这样隐藏的选项卡窗格仍然在原位并且具有有效的宽度：

/* 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 */

更新：之前的两步解决方案首先隐藏所有选项卡，然后使活动选项卡再次可见。相比之下，现在我们有了一个直接针对非活动标签的 1 步解决方案。

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

关于级联顺序的注意事项

这个补丁需要在bootstrap css之后加载，因为css级联顺序规则，总之是后一个规则胜出。

因此，对于在导航选项卡中放置多个图表时遇到相同问题的任何人，这将帮助您解决问题。

【讨论】：