Highcharts dynamic width on hidden tab

Question

I have been trying to figure out how to exactly get my Highcharts chart to have a dynamic width for both window size on load and window resize. My problem is not only do I have the chart place in a hidden tab but also that the parent div has a width of 100%. The chart is not responsive on resize and does not initially load correctly.

Basic principal is here: http://jsfiddle.net/chapster82/c5teh97h/1/

CSS

.content2 {
  display: none;
}
#wrap {
  width: 400px;
  position: relative;
  border: solid 1px #333;
}
#container {
  height:100%;
  width:100%;
}

HTML

<a class="tabs" divId="content1">Content1</a>
<a class="tabs" divId="content2">Content2</a>
<div id="wrap">
<div class="content1 hide">Tab1</div> 
<div class="content2 hide"><div id="container"></div></div>  

Any help would be appreciated.

Thanks

Answer 1

I dont understand your question correctly. But this fiddle may help you:

http://jsfiddle.net/c5teh97h/6/

.content2 {
   display: none;
}
#wrap {
   width: 80%;
   position: absolute;
   border: solid 1px #333;
}
#container {
   height:80%;
   width:80%;
}

Answer 2

In hidden tabs, width of the hidden tab element is always unknown. So if you are drawing charts on a hidden tab, you need to get the width of the tab first and then assign it to highcharts.

//chart options
var options = {
    chart: {
        renderTo: 'container',
        **width: $("#tabs div.ui-tabs-panel[aria-hidden='false']").width()**,
    },