Home > sharepoint > MOSS Project Tasks Gantt Chart size issue in Firefox

MOSS Project Tasks Gantt Chart size issue in Firefox

When you use a Gantt Chart web part, from the project tasks list in MOSS, you get a scroll bar at the bottom so that it fits in the screen (in Internet Explorer). This is done with a div tag and an overflow style of auto in the ms-ganttDiv of the core.css file in SharePoint.

gantt

However, in any other browser (other than IE), you don’t get the scroll bar. Instead, the Gantt Chart is set to the full width and your browser page becomes very wide.

This happens because SharePoint uses a different style for browsers other than IE. For other browsers ms-ganttDiv is replaced with ms-ganttDivNonIE. So, using my trusty developer toolbar in IE and Firebug in Firefox, I decided to check out these two styles.

The difference between the two is the “position” property. In IE, the position is set to absolute. In the other browsers, the position is set to inherit.

So, I decided to switch the position to absolute in Firefox to see what happens. And, of course, it looked horrible (I knew the SharePoint developers did this for a reason).  It makes the Gantt Chart overflow over the size of the webpart.

ganttFirefox

I tried playing around with different css settings to see if I could fix this. But, I think I found the same thing the SharePoint developers found, it is very hard to fix this issue in non-IE browsers (no wonder they hacked this up).

Thus, my conclusion is to make this a fix width Gantt Chart. All I did was set my WebPart to fixed width (instead of 100% height). Then I added a css style to my site to set the width of the ms-ganttDivNotIE.

.ms-ganttDivNotIE{ width:800px; }

Note: making the WebPart width the same size as the .ms-ganttDivNotIE is important. If you don’t do this, the user could see space between the end of the Gantt Chart and the border of the WebPart.

It’s not the perfect solution, but it makes the site act consistent in Firefox and IE (that was my requirement).

Advertisements
Categories: sharepoint
  1. Greg
    December 9, 2009 at 6:49 pm

    Thanks for the tip. I used a fixed width for ganttDiv to correct a similar problem on a Publishing page under IE8.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: