Remove CRM 4.0 IFrame Whitespace

In CRM 4.0 it's often a requirement to display a list view in an IFrame on a form. This is quite a simple task of using the IE Developer Toolbar to determine the URL of the list view and then injecting the URL into the IFrame src property through JavaScript.

However when you do this you may notice that the list view doesn't stretch take up the whole IFrame, it leaves some whitespace around it:



In the past I've used various JavaScript to remove the whitespace and have settled on a method supplied by Andrew Zimmer's blog (http://blogs.inetium.com/blogs/azimmer/archive/2010/01/14/crm-displaying-related-entity-in-iframe-slightly-improved.aspx).

The following method should be called after setting the src value:

function FixStylingInFrameSource(iframeID)
{
   // Check the content window's ready state
   if (document.getElementById(iframeID).contentWindow.document.readyState != "complete")
   {
       // Re-run this function in 10 ticks
       window.setTimeout(function () { FixStylingInFrameSource(iframeID) }, 2);
   }
   // Content window is ready
   else
   {
       // Change the background color
       document.getElementById(iframeID).contentWindow.document.body.style.backgroundColor = "#eef0f6";
       // Remove the left border
       document.getElementById(iframeID).contentWindow.document.body.all(0).style.borderLeftStyle = "none";
       // Remove padding
       document.getElementById(iframeID).contentWindow.document.body.all(0).all(0).all(0).all(0).style.padding = "0px";

       // Make the cell the full width of the IFRAME
       document.getElementById(iframeID).contentWindow.document.body.all(0).style.width = "102%"

       // Show the IFrame
       document.getElementById(iframeID).style.display = "block";
   }
}

After using this script the IFrame looks a lot nicer: