CODEWITHSUNDEEP
javascriptcsshighchartshidehtml
RichP
RichP

Reputation: 525

Divs too wide when hiding/showing

I have two divs that contain two other divs each. One containing DIV's display is set to none. I have a button that toggles the containing DIVs so I can alternately hide/show the containing div and thus the two divs inside. The inside DIVs are set the 49% width, floated left/right. Problem I have is the fist time the visible DIV is hidden and the hidden one displayed the inside two divs are way too wide. If I resize the width of the browser just a tiny bit with my mouse they are the desired size and any time I toggle the visibility from here on out all is fine. If I reload the page it is wrong on the first toggle. Works the same in IE 10 and Chrome so don't think a browser issue.

The inner two divs both contain high charts that are generated and rendered to the inner divs I want them to be side by side and almost (99%) the width of my page.

Here is snipped of my DIVs to be hidden and shown that contain the inner DIVs with highcharts

    <div id="highChartsNG" style="width:99%;display:none;">
        <div id="FillRateHigh" style="border:2px solid black;width:49%;float:left;"></div>
        <div id="WaitTimeHigh"style="border:2px solid black;width:49%;float:right;"></div>               
    </div>                            
     <div id="LowChartsPEAK" style="width:99%">  
        <div id="FillRateLow" style="border:2px solid black;width:49%;float:left;"></div>
        <div id="WaitTimeLow"style="border:2px solid black;width:49%;float:right;" ></div>             
     </div>

This is a snippet of the javascript function I call on a button click to toggle on/off on the display of two containing DIVs

document.getElementById("highChartsNG").style.display = "none";
document.getElementById("LowChartsPEAK").style.display = "block";

Fiddle showing problem, see comment of mine below on how to reproduce http://jsfiddle.net/rplace/UTTz4/1/

Upvotes: 0

Views: 490

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

If you are hiding DIV, you should be aware that browser won't calculate %-based widths with display:none. Then if browser won;t calculate DIV, then also Highcharts are not able to do it ;)

Check this FAQ - when showing chart update his size or call reflow().

Upvotes: 0

webketje
webketje

Reputation: 11006

Okay, after hours of searching I finally found the problem (I think). I was determined to find the solution =).

The problem is multiple-fold.

  1. The first problem was the display:none; property on the second chartcontainer. For some reason the widths calculated for the charts and their containers were incorrect for the hidden div. So I removed the property from the HTML, and instead hid it dynamically with document.getElementById("LowChartsPEAK").style.display = "none"; in the JS right after the chart rendering functions. If you do this, your SVG's will fit your containers already, although the last one has a slight shift.
  2. Apparently HighChart doesn't like percentage-based parent containers. When you go to your updated fiddle , run the fiddle with both: 
 <div id="wrapper" style="width: 800px;">
 <div id="wrapper" style="width: 100%;">

Open the console and check the results (container name - SVG width - container width). When the wrapper is given a pixel width, all container widths are equal (as it should be). Now check the wrapper with percentage width: your last SVG will be about 6 to 20 pixels smaller. The only solution I have found for eliminating that small shift in the last container, is that somewhere a top container must have a pixel-width.

EDIT: pt's and em's also work. It's only % that causes problems

Upvotes: 1

Related Questions