Highcharts + Bootstrap .table-responsive issue

Question

When I put my chart inside of Bootstrap's .table-responsive the chart doesn't fill the entire td. Here's a jsFiddle of the problem. As you might see I've set the width to 100%, and this worked in the grid.

There seems to be a strange bug aswell, when I open the chrome console with "Inspect element" the problem is solved (happens in the jsFiddle aswell).

How can I make the chart fill the entire <td> by default?

gpgekko · Accepted Answer · 2014-03-03T14:19:32.670

6

You'll have to set the width setting of chart after initialization. After initialization, Highcharts only adapts on a resize event (try it out, if you resize the window it will change width), so you might want to trigger an resize event.

Here is a jsFiddle (ab)using a resize event: http://jsfiddle.net/b9DMn/1/

Highcharts does automatically gets the width of its container when its creating its chart, but if you put a breakpoint there you'll see that the table cells are still divided equally at that point in time. In fact, it is the chart that triggers the table to grow the right cell. If you can fixate the cell width, that would probably help too.

Here is a jsFiddle fixating the width of the cells, so they don't grow and shrink when content gets added: http://jsfiddle.net/b9DMn/2/

edited Mar 03 '14 at 14:19

answered Mar 03 '14 at 13:49

gpgekko

3,506
3
32
35

Doesn't seem to be any 100% alternative in the API documentation. Any suggestion for a hack? – justanotherhobbyist Mar 03 '14 at 13:53
3

@hustlerinc One quick and dirty hack would be to just fire an resize event immediately after creating the chart (`$(window).trigger("resize");`). Btw, you have two document ready wrappers in your code. – gpgekko Mar 03 '14 at 13:55
Can't get it to work, do you mind showing where to put the code in the jsFiddle? – justanotherhobbyist Mar 03 '14 at 13:59
It work's for me in jsfiddle too, but as soon as I try it on the real document it doesn't work anymore. All you did was add that trigger right? – justanotherhobbyist Mar 03 '14 at 14:12
@hustlerinc Yeah, and remove the duplicate document ready wrapper. Also see my updated answer for another possible solution (and some more background info). – gpgekko Mar 03 '14 at 14:23
I lıke the new colwidth solution. Thanks for the help. – justanotherhobbyist Mar 03 '14 at 14:30

Highcharts + Bootstrap .table-responsive issue

1 Answers1

Linked