12 July 2011

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
// 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:

No comments:

Post a Comment