2

I am using Twitter bootstrap nav tabs to create a dashboard where the single page is tabbed for each graph. I am using chartkick to generate those graphs. When I pair it with tabs the second two tabs resize the chartkick graphs and make them unusable.

<div>
  <ul class="nav nav-tabs responsive" id="myTab">
        <li id="10" class="active"><a data-toggle="tab" href="#I">Need By Monthly Breakout</a></li>
        <li id="11"><a data-toggle="tab" href="#J">Model Quantities Breakout</a></li>
        <li id="12"><a data-toggle="tab" href="#K">Monthly Quantities Breakout</a></li>
  </ul>
</div>
<div class="tab-content responsive">
  <div class="tab-pane fade in active" id="I">
    <%= render partial: 'orderschart_a' %>
  </div>  
  <div class="tab-pane fade in" id="J">
    <%= render partial: 'orderschart_b' %>
  </div>
  <div class="tab-pane fade in" id="K">
    <%= render partial: 'orderschart_c' %>
  </div>
</div>

![This is the output of the first tab and it looks normal. ][1]

![This is the output of the second tab, you can see it has condensed the graph for some reason.][2]

![This is the output of the third tab, you can see it has condensed the graph for some reason.][3]

As you can see this is very inconvenient when trying to do dashboards, but I can't see to figure out how to fix it.

I have tested the second and third graphs independent of the tabs page and they work fine when not part of the tabs.

I have tried adding responsive tabs, but I can't get that to work either.

I really don't want to have to not use tabbed pages for my graphs, but I will if I can't get this to work.

Shenanigator
  • 1,036
  • 12
  • 45
  • Well, I don't have enough rep to post an image. Suffice it to say the graphs rendering on tabs 2 and 3 are sized down very small and it messes up all of the labels and makes the graph mostly useless. – Shenanigator May 13 '15 at 18:30
  • Perhaps you're encountering http://getbootstrap.com/getting-started/#third-box-sizing – cvrebert May 13 '15 at 19:12
  • it's possible, but I would think the first tab would also suffer. – Shenanigator May 13 '15 at 19:35
  • Have you tried forcing the graph to re-render when the [`shown.bs.tab`](http://getbootstrap.com/javascript/#tabs-events) event fires? – cvrebert May 13 '15 at 19:39
  • I have tried every form of box resizing fix there and none of it changes the output – Shenanigator May 13 '15 at 19:48
  • Not sure how I would re-render the graph as it is a direct MySQL query via my rails model and I also don't know why that would help the situation given that it appears to be a problem with the fact that the tabs have to use div's and the div's are apparently the issue. – Shenanigator May 13 '15 at 19:51
  • Looks like it's an unresolved bug in the library: https://github.com/ankane/chartkick/issues/28 – cvrebert May 13 '15 at 23:42
  • Chartkick uses JS to render the chart. Typically JS-based charting libraries break when the charts are placed within hidden (`display:none`) elements, such as hidden tab panes. The usual workaround is to add some extra JS to re-render the chart. Chartkick seems to lack (or not have documented) this fairly basic feature :-( – cvrebert May 13 '15 at 23:45

1 Answers1

0

Turns out the problem was with the div's and the way the tabs are actually sub-divisions of divisions and total available box sizes. I ended up putting each graph on its own page.

Shenanigator
  • 1,036
  • 12
  • 45