How to Remove the Gap Between WebParts on PDP

Posted By Posted by: Khurram Jamshed on May 7, 2015

In the world of Project Server/Project Online, we deal with Project Detail Pages (PDPs) to place custom fields using basic info web-parts all the time.

There is often a need to drop more than one basic info web-part on to the same page and 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 a few webparts, the following potential issues can occur:

  1. Extra padding is 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 the layout.
  2. Dropping custom fields on the same page using several basic info webparts can also cause alignment issue between custom fields.

Below image depicts both issues:

And here is an easy solution to reduce the gap between webparts, add the below css to PDP using content editor webpart, and it reduces the 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 the below JavaScript through the 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 blog)

 

Let’s witness the magic now:

 

Before:                                    

Before

 

 

After:

After the PDP Issue

 

We hope this helps with your project!


Blog Posted In Blog Posted In: How to
Blog Posted In 

Leave a Reply

Your email address will not be published. Required fields are marked *