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

For div id="2b" can you put this: `style="border: solid"` and see where the borders for the div are and then do it for this `id="chartContainerColumns"` as well. I normally do this during development to see what the issue is. Oftentimes, it helps me narrow the issue down to the specific item. — CodingYoshi, Dec 18 '16 at 03:06
i have updated the result based on your concern. is it because active class or something ? — Faris Fajar, Dec 18 '16 at 03:14
So that shows that it is the same size as the other tab. Now do the same for the children controls and see which one is different so you can then see what the issue with the specific item is. — CodingYoshi, Dec 18 '16 at 03:24
they have the same size and i didn't put any css on them, so this is pure based on the codepen. i guess this is about show and active class in their behavior — Faris Fajar, Dec 18 '16 at 03:34
http://stackoverflow.com/questions/17206631/why-are-bootstrap-tabs-displaying-tab-pane-divs-with-incorrect-widths-when-using this is the answer lies in here — Faris Fajar, Dec 18 '16 at 08:28

score 0 · Accepted Answer · edited May 23 '17 at 12:24

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.

dotnet highchart asp.net with nav tabs bootstrap

1 Answers1