jqxChart not initialized with relative height

[TDRParticipant]

Hello,

we are encountering problems with the jqxChart when using relative widths and heights. Setting the width or height as pixels is working.

In firefox both is working, but chrome does not even initialize the chart in the div.
We prepared a minimal showcase to demonstrate the behaviour (based on your jqxChartDemo): https://jsfiddle.net/b539exmf/7/

Please have a look with chrome.

Thanks and kind regards

Thorsten

[Peter StoevKeymaster]

Hi Thorsten,

The issue is not in jqxChart. It is in your HTML. Updated sample: https://jsfiddle.net/jqwidgets/7rshfm7c/. Chart’s width and height are in percentages.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[TDRParticipant]

Hi,

thanks for the quick answer. We need the table structure because there are more elements inside. Our html is valid.
What makes me wonder is that the jqxChart seems to be constructed in background but not attached to the DOM tree in chrome. We used the div structure in first place but had the same issue then in firefox (whereas in chrome it was working)

[Peter StoevKeymaster]

Hi Thorsten,

Your assumption is wrong, the Chart is always in the DOM. Putting HTML Elements with relative width and height 100% within TD tags is a bit of a hack, because Tables by default are with auto-size behavior and TR’s height depends on the content within the TD tags. When you put a DIV tag with 100% width and height within a TD tag, the TD tag’s height would be 0, because it cannot calculate its height based on a percentage. This is how WEB and WEB browsers work. I suggest you to either use my example which demonstrates how to create a Chart with fluid size or think about other approach like using responsive Grid structure of Bootstrap.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Christian HuebertParticipant]

Using display:inline-block for the DIV solves the issue in Chrome. Firefox does not have these problems with DIV with a relative height inside a TD.

See stackoverflow for this

[Author]

Posts