100% height not rendering in Internet Explorer and Mozilla

[philiptiju]

Hi,

 

 

 

I use the below code to render the fusion charts

 

 

 

< script language="JavaScript" type="text/javascript" > // Intentionally gave spacing

 

var jsVariableForColumn = new FusionCharts("Charts/Column2D.swf", "columnTag", "100%", "100%", "0", "1");

 

jsVariableForColumn.setDataXML(parent.loadColumn());

 

jsVariableForColumn.setTransparent(true);

 

jsVariableForColumn.render("columnChart");

 

< / script > // Intentionally gave spacing

 

 

 

 

 

However its rendering width of 100%. Height let it be of any value with %, its doesn't change at all. It shows default size I suppose. Its shows perfectly in Chrome . Plz let me know whats the exact issue. Waiting for the reply.

Edited December 18, 2009 by Guest

[Guest Madhumita]

Hello,

I'm afraid, we could not recreate the issue.

1. Have you height of the parent container?

2. by nature of HTML rendering, DIV blocks take 100% width and 100% height. But the trick (and issue for certain browsers) is that the height of the window is the height of its content

Could you attach the entire code so that we can look into the issue?

Awaiting your reply.

[philiptiju]

The code is as above:

 

When I enable debug more I get the following value

 

 

 

Internet Explorer:

 

Initial Width: 1108

 

Initial Height: 192

 

Mozilla:

 

Initial Width: 1112

 

Initial Height: 200

 

Chrome:

 

Initial Width: 1129

 

Initial Height: 418

 

 

 

I'm getting 100% height and width in Google Chrome.

[Guest Madhumita]

Hello,

If you fix the height and width for the chart in %, the size of the chart becomes browser dependant.

 

This is the expected behaviour.

[philiptiju]

Yeah I do agree that.. However it takes width as 100% and height around 25% of the browser

[FusionCharts Support]

Hi,

% height on the first hand dependents on the parent HTML element which is the DIV - columnChart. Hence, please try once setting the proper height of that DIV to get the changes universally.

[Guest Madhumita]

Hello Philip,

Please refer to the link below:

http://www.tutwow.com/tips/quick-tip-css-100-height/