Remove Gap between WebParts #ProjectServer #PDP

In Project Server/Project Online world, we deal with Project Detail Pages (PDPs) all the time to place custom fields 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;

     }

 </style>




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="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
$( document ).ready(function() {

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

})
</script><br/>

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

Lets witness the magic now:
Before:                                              After:  

    

 until next time.

Posted in: