Jqxtabs width for resizing charts dynamically

[sonicvizParticipant]

I have a wordpress plugin using Jqxtabs display.
One tab has a number of charts in vertical display in the tab panel, one after the other.

I need to dynamically resize the charts based on device – mobile vs desktop, or small screen vs larger screen.

// select the chartContainer DIV element and render the chart.
jQuery (\”#chartContainer\”).jqxChart(settings);

console.log(‘Tab width = ‘ + jQuery(‘#jqxTabs’).jqxTabs(‘width’) + ‘ window.innerHeight: ‘ + window.innerHeight + ‘ window.innerWidth: ‘ + window.innerWidth);
//Dynamic resize chart
var chartHeight = (window.innerWidth -50) / 1.33;
jQuery (\”#chartContainer\”).height(chartHeight);

but I get
Tab width = 100% window.innerHeight: 943 window.innerWidth: 543

So I can’t do it because the tab width is returning 100% instead of a pixel value.
Is there any way to reliably detect the width of a tab widget so I can then dynamically resize charts within to to the correct size and ratio?

Another issue:
<div id=”tab-charts” style=”margin-left: 15px;”><h3 class=”bwt_title”>Select Date Range</h3><script>

Where is style=”margin-left: 15px overridden in jQX widgets for tabs?
I’d like to maximise the charts to full width screen on mobile and need to drop this to 1 pixel, but can’t find where to override it.

[sonicvizParticipant]

Scratch the margin-left issue – found it.

Still curious about the tab width though.
I can get around it using 51degrees screen width detection etc but curious.

[DimitarParticipant]

Hello sonicviz,

You can try setting the width of the charts to ‘100%’ (in the HTML).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[sonicvizParticipant]

Hi Dimitar,

Yes, thanks I already did that.

My questions was related to Tab widget width, as that is needed to calculate the correct chart height to go with the selected aspect ratio.

[DimitarParticipant]

Hi sonicviz,

You can get the jqxTabs width in pixels with jQuery’s .width().

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts