Home > Khurram Jamshed > Formatting #ProjectServer PDP using #CSS and #JavaScript

Formatting #ProjectServer PDP using #CSS and #JavaScript

We place Project Server custom fields to Project Detail Pages using Basic info web-part.

There is often a need a when we have to drop more than one basic info web-part to a same page to group similar fields. I usually do this when i have to put similar fields under one group heading.

When you add custom fields to the page using more than few webparts, following potential issues can occur:

  1. Due to an extra padding automatically included by default for each webpart. You will observe a noticeable gap between each webpart on same page. And OOB configuration of webpart doesn’t have any way to reduce this gap. So in some cases, it may become unacceptable for customer. 
  2. Dropping custom fields on same page using several Basic info webparts can also cause alignment issue between custom fields. 

Below image depicts both issues:

And here comes an easy solution to reduce the gap between webparts, add the below css to PDP using content editor webpart, and it will reduce spacing to 0:

<style type="text/css">
     .ms-webpartPage-root {
         border-spacing: 0px !important;
       .ms-webpartzone-cell {
         margin: 0px !important;

For alignment of custom fields, use below JavaScript through content editor webpart on the page:
(you can use width value to adjust width of page according to your need)

<script src=”http://bit.ly/1d6tFm3&#8243; type=”text/javascript”></script><script type=”text/javascript”>
$( document ).ready(function() {

    $(“tr td.ms-formlabel”).width(“500px”);


(source of above JavaScript code is from Martin Laukkanen’s blog)

Lets witness the magic now:
Before:                                              After:  


 until next time.

via All about Enterprise Project Management (EPM) http://bit.ly/1d6tFm6

Khurram Jamshed
The author of the blog has an extensive experience of working as an EPM Consultant. Currently he is located in Dubai, UAE and working for Microsoft partner organization as Project Server specialist. He has a thorough experience of providing Project Management technical/functional consultancy to all sort of organizations. He is a certified PMP, a Project Server MCITP, and also received a MS community contributor award 2011.

This article has been cross posted from khurramjamshed.blogspot.com/ (original article)

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

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

Facebook photo

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

Connecting to %s

%d bloggers like this: