I recently started loading our printable foupons into an embedded iframe which was displayed using a modal window (light box style)
Something I didn't realize when I started doing this is that IE 7's new shrink to fit printing caused the contents of my iframe to shrink down according to width of the iframe in its container.
To get around this I created a seperate style sheet containing
@media print
{
*
{
display:none !important;
}
.fouponPopup
{
display:block !important;
width:100% !important;
position:absolute !important;
left:0px !important;
top:0px !important;
}
.fouponPopup iframe
{
display:block !important;
width:100% !important;
}
}
Then in JS before showing the modal window (using AjaxControlToolKit) I add the style sheet to the header
fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", website + "styles/print.css");
document.getElementsByTagName("head")[0].appendChild(fileref);
with fileref being a global variable. Then when the user hits the close botton I remove the fileref object from the head.
document.getElementsByTagName("head")[0].removeChild(fileref);
I had to dynamically add/remove the css file so that users could print the pages normally in all other cases.
I am not 100% this is the best option to get around this issue in IE 7. But it works.
Subscribe