Chart alignment problem in Google Chrome

[GoogleCodeExporter]

JSGantt Version: 1.2
Browser: Chrome
OS: XP

What steps will reproduce the problem?
1. View the demo chart at www.jsgantt.com using Chrome
2. The gantt table rows are out of alignment with the task rows

Original issue reported on code.google.com by Mark.Sha...@gmail.com on 9 Aug 2009 at 2:48

[GoogleCodeExporter]

I have this problem too (see attached file).

OS: XP SP3
Chrome Version: 4.0.249.64 (35722) stable

Original comment by pavel.go...@gmail.com on 19 Jan 2010 at 9:30

Attachments:

• gantt.png

[GoogleCodeExporter]

Any hints on a fix for this? I can't demo this to management until I can fix 
this. 
Thanks

Original comment by sto...@gmail.com on 20 Jan 2010 at 2:53

[GoogleCodeExporter]

Confirmed :(

Original comment by allen.e....@gmail.com on 4 Mar 2010 at 3:26

[GoogleCodeExporter]

Hi found a solution to this alignment problem... It was observed in Chrome, 
Safari and IE8. Basically the problem is that in the jsgantt.js file, height of 
row <tr> for each task (on right hand side) is set but somehow the above 
mentioned browsers require you to set height of <td> as well....

Resolution:

Add HEIGHT: 20px; in style attribute of these td.

How?

You need to update your jsgantt.js file. The variable you should be looking for 
to update is vItemRowStr.

Find all lines of this variable, and update all lines starting with 

vItemRowStr += '<td class=

In this particular td, you have to set the height. See a sample below.

Original

vItemRowStr += '<td class="ghead" style="BORDER-TOP: #efefef 1px solid; 
FONT-SIZE: 12px; BORDER-LEFT: #efefef 1px solid; cursor: default;"  bgcolor=#' 
+ vWeekdayColor + ' align=center><div style="width: 
'+vColWidth+'px">  </div></td>';

Updated

vItemRowStr += '<td class="ghead" style="BORDER-TOP: #efefef 1px solid; 
FONT-SIZE: 12px; HEIGHT: 20px; BORDER-LEFT: #efefef 1px solid; cursor: 
default;"  bgcolor=#' + vWeekdayColor + ' align=center><div style="width: 
'+vColWidth+'px">  </div></td>';

I have attached the updated file.

Cheers.

Original comment by adeelza...@gmail.com on 6 Aug 2010 at 2:09

Attachments:

• jsgantt.js

[GoogleCodeExporter]

Thanls Adeelza! Saved me some time working that one out :)

Original comment by a...@mijura.com on 26 Jul 2011 at 1:31

[GoogleCodeExporter]

You can also:
Change gname and gdatehead (in code, not in css) to 19 instead of 20

Original comment by dor.ram...@gmail.com on 1 Sep 2011 at 12:20

[GoogleCodeExporter]

Good Job Adeelza. This did the trick. This needs to be committed to source?

Note: dor.ram that does work, but it breaks the other browsers. I don't think 
it is the right approach.

Original comment by natew...@gmail.com on 22 Dec 2011 at 12:17

[GoogleCodeExporter]

Adeelza this (your updated file) doesn't do the trick in my case (which is 
IE10), I've attached an image. If I try to run it in compatibility mode it does 
though but it destroys (the beauty of) other pages of my application. So it is 
like I've to switch between compatibility-mode and normal-mode for viewing 
different pages.

Original comment by kjz...@gmail.com on 16 Oct 2013 at 1:40

Attachments:

• Alignment-Problem-Gantt.png

[GoogleCodeExporter]

Thanx Adelzza, it seems to work for now!

Original comment by zba...@gmail.com on 11 Apr 2014 at 1:50