The heigh of 'Bubble chart' and 'Dual axes, line and column' with Bootstrap #6261
Comments
Can you provide a live demo please? It works fine here: http://jsfiddle.net/highcharts/pxd6js0x/ It may be related to #6217. Prior to v5.0.7, the chart would size up to 400px height if the container height was less than 19px. |
After years of feeling like a leech off all the support forums I've used to fix problems like this, I finally get to be part of the solution! I have been able to replicate it in at least one scenario, where it seems that at best there is a direct issue regarding Bootstrap grid css and this Highcharts bug; or at worst, css being applied directly to the chart's render div is causing the bug. Anyway, that's my two cents, here's the Fiddle: http://jsfiddle.net/robert_ivaniszyn/p7rL7yfz/1/ Hope this helps! Here's a screenshot of the inspected div showing that it has been given an element styling height of 1px. As an additional test, and potential workaround for current sufferers: If you remove the Bootstrap grid css from the #TrendChart div, the chart will render at full height of the parent. |
Thanks for sharing! It's caused by CSS in Bootstrap:
To explain: http://jsfiddle.net/p7rL7yfz/3/ - height of the container is 1px, so this is what Highcharts use to render a chart. Another workaround: http://jsfiddle.net/p7rL7yfz/4/ - set directly Related issue on Bootstrap: twbs/bootstrap#13640 |
This issue is still present - there doesn't appear to have been any code change and the workaround needs to be done in the highcharts code |
@PopRe The problem seems to be caused by CSS in Bootstrap. Could you provide a demo showing the problem with Highcharts while not using Bootstrap CSS? |
It appears to be a slightly different issue: Basically the code at fault is: If the containing element has any padding on the top or bottom, the first will return a negative or small number. The second block will use that (or 0 if it's negative) instead of 400 because chart.containerHeight is not 0 |
@PopRe In your case should the chart have 0px height? If you define height for the chart's container as 100%, then the container height is properly displayed in the HTML and the chart is using it. Demo: https://jsfiddle.net/p7rL7yfz/12/ |
The height is undefined in my case. Setting it to something like 400px is a work around, however the bug (which is a regression) should still be fixed. |
@PopRe "The height is undefined in my case." and in that case default value is 400. If you want something different that you could set it using current API. If you are not satisfied with the current design, please specify how should the algorithm be improved and why. "the bug (which is a regression) should still be fixed" - Please let us know which version is working correctly for you and please provide a live demo. |
What should be fixed is the following: It's suppose to default to 400, however, it instead defaults to a small number such as 0 (if the containerHeight is < 0) or 1 (if the offsetHeight - padding is 1). A possible fix would be a conditional checking if it is below 5 then set it to the default of 400, or to fix the code calculating the containerHeight |
@PopRe Thank you for explaining some of the questions.
|
I've submitted a new issue with the relevant details: #7000 |
It was asked multiple times for 'last working version' and also stated 'problem with bootstrap'...but the fact that 5.0.7 was stated as the version that changed the behavior of how chart heights were determined, can't the code that changed in highcharts be identified versus stating to do a work around in markup (i.e. if we have 10s/100s of clients with markup that worked and now breaks when moving to 5.07+)? Guess I'm just disappointed that this is being closed when the issue still seems very prevalent and I either have to have a fork of highcharts source or figure out how to update hundreds of sites (all multitenant sharing same js references) to work around the problem. |
This regression was caused by the fix to #6217, where a user reported that container sizes below 20px weren't respected. You can read the comments there. So while it makes sense to make 1px containers cause 400px charts, users expect 18px containers to cause 18px charts. The question is where to draw the line. I have committed a fix now that makes the chart draw at 400px height if the container is 1px or less in height. It takes care of the Bootstrap issue, I hope it takes care of other cases too. If not, we can consider raising the limit to for example 5px, but that feels more unpredictable. |
Expected behaviour
Feel the size of recipient!
Actual behaviour
Resizing to 1px
Live demo with steps to reproduce
Affected browser(s)
The text was updated successfully, but these errors were encountered: