How to Remove Gaps Between WebParts on PDP

Posted By Posted by: Khurram Jamshed on June 3, 2015

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 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 a few webparts, the following potential issues can occur:

  1. Due to an extra padding automatically included by default for each webpart. You may observe a noticeable gap between each webpart on same page and OOB configuration of webpart doesn’t have any way to reduce this gap. Therefore, 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 issues between custom fields.

Below image depicts both issues:

Alignment & Spacing Issue

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 blog)

Let’s witness the magic now:

Before:

Alignment and spacing issue resolved

After:

Alignment and spacing issue resolved

 


Blog Posted In Blog Posted In: Blog, How to, Troubleshooting
Blog Posted In 

Leave a Reply

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