dotnet highchart asp.net with nav tabs bootstrap

Question

There are something that i would like to ask about, for example this is my code when i want to display using this reference https://codepen.io/wizly/pen/BlKxo/ with dotnet highcharts or 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>

and the result from this coding will be displayed in web browser

however, the second nav tab result become this. As you can see, the size of the chart is reduced into 50% of original chart.

the problem is how to make the result in second tab is clearly similar with the first tab ? any suggestion for this problem ? thank you very much

Updated: after i put the border, then this is the result

Answer 1

This post is direct answer from ryenus in Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

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: The previous 2-step solution first hides all tabs, then makes the active tab visible again. In comparison, now we have a 1-step solution, which directly targets the inactive tabs.

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.

so, for anyone that having same problem when putting more than one chart in the nav tabs, this will help you through the problem.