IFrame Print Styles In CRM

I've written a few IFrames to help extend CRM in the past, but recently, an issue with them was brought to my attention that no one had ever mentioned to me (and, therefore, I'd assume that no client had ever complained about, either).

A client had tried to print a page that had an IFrame I developed on it.  Instead of whatever was in the IFrame, there was nothing.  I.e. my IFrame was hidden.  Immediately, I realized that IFrames must be hidden in CRM.  Whether on purpose or by accident (on Microsoft's part), I had to get this resolved.  All my hard work was being hidden by CRM!

So I parsed through the myriad of pages and style sheets that CRM installs on the server, looking for how it interprets IFrames, and found this in one of the style sheets:

IFRAME.custom
{
width:    100%;
height:    100%;
border:    1px solid #7b9ebd;
behavior:   url(/_forms/controls/IFRAME.htc);
}

All IFrames get the class "custom" by default.  So, all I had to do was go into the print style sheet and put something awfully similar: 

IFRAME.custom
{
width:    100%;
height:    30px;
border:    1px solid #7b9ebd;
behavior:   url(/_forms/controls/IFRAME.htc);
}

I had to give it a height, because it seems to make the height 0% or 0px, though I don't know where that's defined.  Of course, you'll want to put new, print-oriented styles in your style sheet you use for the IFrame.  For this IFrame, I was creating what looked like a lookup for contacts, so I had these styles (yours may vary):

input
{
 font-family: Tahoma;
 font-size: 11px;
 border-color: White;
 border-width: 0px;
 color: Black;
}

DIV.lu
{
 height:    0px;
}

TABLE.lu
{
 height: 0px;
}

IMG.lu
{
 height: 0px;
}

This will set the linked text (the contact's name) to black, the search button to being invisible and all the other stuff surrounding the search button to being invisible.  You don't want it to looked like a linked text box, you want it to look like plain, black text.

It doesn't recognize "media='print'" in your style sheet reference, btw, so you'll have to do something like I did:

   <script type='text/javascript'>
    var parentLocation = '' + window.parent.location + ''
    if(parentLocation.indexOf('/print/') >= 0)
    {
    // CSSReference is your <link> tag to your style sheet
     var cssReference = document.getElementById('CSSReference');
     if(cssReference != null)
     {
      cssReference.href = "MyStyleSheetForPrinting.css";
     }
    }
   </script>

So, from now on, when you make an IFrame in CRM, you should consider all of this or your IFrames will not print at all.

Published Monday, June 11, 2007 4:55 PM by vbullinger

Comments

# re: IFrame Print Styles In CRM

can i use this code to resize the Iframe, if so where do i put it, in the onload event of the form? i have struggled with that with 2 clients already.

IFRAME.custom

{

width:    100%;

height:    100%;

border:    1px solid #7b9ebd;

behavior:   url(/_forms/controls/IFRAME.htc);

}

Wednesday, September 12, 2007 8:54 AM by plc

# re: IFrame Print Styles In CRM

I would suggest setting the size/location of the IFRAME in the entity's form customization (click settings, customizations, double click the entity in question, double click form).  You can say how big it is there.  Rows, placement and width are all customizable from there.  Resizing it from the style sheet would be tricky and I wouldn't recommend it unless you had a ninja grip on CSS and the CRM source code.

Friday, September 14, 2007 4:41 PM by vbullinger

Leave a Comment

(required) 
(required) 
(optional)
(required)