Correct the Hideous, Unreadable, Overlapping, Fixed Width Project Sites Webpart

This one has been driving me crazy, and finally one of my coworkers helped me sort out the css to fix this hideousness.

Waaaay back in Project Server 2007, the Project Sites Webpart was included on the front page of PWA by default. Our folks got really used to this, so when we upgraded to 2010, we added it back in. Same deal with 2013…except that the table layouts look horrifying in SharePoint 2013 – the column widths are all the same, so long project names overlap and there is tons of dead space for owner and date, like so:

before

After a lot of searching around and reading and trying different things and testing, we found a way to fix this. It really shouldn’t have been so hard! Here’s what we came up with:

Add a “Script Editor” webpart to the page (front page of PWA if that’s where you put it, just the same page if you put it somewhere else)

Then add some code in the “Edit Snippet” window:

edit

The code:

<style type=’text/css’>
table.XmlGridTable
{
table-layout: auto !important;
}
div.XmlGridTableBorder
{
width: 85% !important;
}
</style>

Hit “Insert”…

insert

…and BOOYAH, that’s looking like a spiffy and helpful webpart again.

after

Advertisements

One thought on “Correct the Hideous, Unreadable, Overlapping, Fixed Width Project Sites Webpart

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