| Issue 374: | Printing of iframe in IE (7&8) | |
| 2 people starred this issue and may be notified of changes. | Back to list |
|
What steps will reproduce the problem?
1. Create a page with whatever clickable that opens a nyroModal (once
clicked) in an iframe. (I use nyroModalManual on a url = local address
where I have forceType iframe, but I don't believe that has anything to do
with it).
2. Then, try to print the frame in IE7 (only tested with IE8 Compatibility
Mode) or IE8.
3.
What is the expected output? What do you see instead?
The body will inherit the css of the parent's (original page's) body-tag.
Ie. width and @page { width: 0cm; } (so far the only tested stuff). This
does not affect any subelements, which still inherit for example
font-family and font-size.
What version of the product are you using? On what operating system?
nyroModal 1.5.5
jQuery 1.3.2
WinXP
Please provide any additional information below.
Works fine in any other browser [latest FF Safari, Chrome tested] (though
no other browser supports @page { margin: 0cm }, they do not inherit the
width. If you're having trouble reproduce the problem, it can be
interesting to know that I used the "shrink to fit"-setting when printing,
but I don't believe that matters neither.
Possible work-around is by binding the button that you bind the
iframe-print action to:
1. Save the original css of the original page's body
2. Copy the css of the iframe's body to the original page's body
3. print iframe
4. Copy back the CSS that we saved in 1. to the original page's body.
This is however not a very good workaround imo, hence if you/anyone have
any ideas I'm very open.
I also tried to put the same page I used for testing (the content in the
iframe) in a "regular" iframe on the original site, without the nyroModal
script and it worked fine there. Hence, I assume there's something fishy
going on in the nyroModal-script with inheriting widths or something like that.
Thanks a lot for creating this awesome script btw. :) I can mention that I
use it for a company's ecommerce-site (turnover 10+ million Euro /year) as
one of the most critical components (when pushing the buy-button).
Nov 8, 2009
#1
carljoha...@gmail.com
Nov 8, 2009
Update 2 (work-around): See full code below for a complete work-around which should
work in the general case when wanting to print an nyroModal iFrame:
----------------------------------------------------------------
//Save original values of body and it's children, with the exception of the nyroModal
(which we of course won't touch)
bodyWidth = $("body").css("width");
var displayValues = [];
elementsVisible = $("body").children().filter(function () {
return ( $(this).css("display") != "none" && $(this).attr("id") != "nyroModalFull" );
});
elementsVisible.each(function () {
displayValues.push( $(this).css("display") );
});
//Set width to iframe's width (to set the proper printing area)
$("body, html").css( "width", $("iframe#nyroModalIframe").width() + "px" );
//Set all other elements to not display, to avoid that elements inside pushes the
width of the body/page to be bigger than the iFrame's.
elementsVisible.css( "display", "none");
//Print iFrame
nyroModalIframe.print();
//Reset all values to their original
var i = 0;
elementsVisible.each(function () {
$(this).css("display", displayValues[i] );
i = i + 1;
});
$("body, html").css( "width", bodyWidth );
----------------------------------------------------------------
This work-around have been tested in IE8 and FF3.5. Only issue is the flashing of the
background content. Perhaps a better solution would be to try to cut away anything
wider than the iframe width, but in the end, the same effect would still be needed to
occur, just for a smaller area. Or if there's a way to add the display: none and
body-width with the @print css selector attribute... I'll perhaps do some research on
that solution tomorrow.
Apr 16, 2010
ThanksSorry for the so looooong delay, and thanks for sharing your solution!
Status:
Fixed
Apr 16, 2010
Thanks for implementing and the great script! =) As a side-note, I use this script as the major component (most fancy functionality is based on it, including the core part, the functionality to make purchases) on an eCommerce site with a turnover of between 200-300 million Swedish Kronor (more or less 30-50 million dollars). If you would like to use it as reference you can check it out on www.tingstad.se.
Apr 17, 2010
Ok thanks. I added your site here: http://nyromodal.nyrodev.com/wiki/index.php/List_of_websites_using_nyroModal |
||||||||