Wednesday, May 5, 2010

IPP IFrame Grails Printing with Tabs

Step 0:
First thing's first: IE7 + Iframe + window.print() = non-functioning print button. The solution for this is to use: document.execCommand('print', false, null);

Now that that's out of the way.

For our Grails page we are using tabs (yui 2.7.0.1) to organize and display things in a more user-friendly fashion. The problem with this comes when you're ready to print. There have been several solutions (none of them pretty) that I've come across that have attempted to solve this problem. With the help of Heidi, we have come up with one more:

Step 1: Print Button


This can also be done with a link:
<a onclick="document.execCommand('print', false, null);" href="#">PRINT</a>


Step 2: print.css
You need to fix your style sheet to remove the yui tabs and display the content in-line. This is what worked for us in IE7.

.buttons {
display: none;
}

.yui-navset .yui-content .yui-hidden {
border:0;
height:100%;
width:100%;
padding:0;
position:relative;
left:0px;
overflow:auto;
visibility:visible;
}

.dialog table {
padding: 0;
border:0;
}

If you're using firefox you need to add:

.tabInner {
display: none;
}

3. Make sure this tab removal only happens when you're printing:
<link rel="stylesheet" type="text/css" href="css/print.css" media="print">


And you're done! Please feel free to share other solutions you've found when printing. I'm always looking for a better, more eloquent solution.

Brandy