Printing contents of iframe without hosted page's scrollbar

Question

Click a button, and it runs PrintInvoice, which uses jquery printElement (hmm, version 1.2) to open a window with the div containing a button and an iframe, as well as the print dialog:

    <script type="text/javascript" language="javascript">
        function PrintInvoice() {
            $('DIV#EInvoice').printElement({
                printMode: 'popup',
                leaveOpen: true,
            });
        }
</script>

Where the relevant elements are as follows:

<div id="EInvoiceWrapper">
            <div id="EInvoice" style="overflow: hidden">
                <center>
                    <a style="display: block; width: 100%; height: 100%; background: url(API/OAL/img/btnCloseWindow.jpg) no-repeat top center;"
                        href="javascript: window.close()"></a>
                </center>
                <br />
                 <iframe id="PrintableInvoice" name="PrintableInvoice" src="https://www.whatever.com/OrderInvoice.aspx" frameborder="0" scrolling="no" style="width:590px; height:750px !important;"></iframe>
            </div>
        </div>

Which correctly pops up a window with the EInvoice div contents and loads the print dialog, but the hosted page displays a vertical scroll bar.

Popup window with scrollbar

Which of course is then rendered in the print document. I need to get this page printed without the scrollbar (I am indifferent as to whether it shows in the popup window.) Currently the users cancel out of the Print dialog, right click on the actual invoice, and print from there (which does it correctly without the scrollbar).

Things I have tried: setting height on the iframe, setting height on the div, passing different settings into the printElement printBodyOptions, about a million other things.

What I think I need to do is get the page hosted within the iframe to expand to its full height, so it doesn't need to show the scrollbar. I have no control over the hosted OrderInvoice.aspx.

How can I do that? Or what other approaches might work to hide the scrollbar?

Did you not already find this post - [Remove scrollbar from iframe](http://stackoverflow.com/questions/10082155/remove-scrollbar-from-iframe)? It seems the answers below will reiterate points already made here. I assume you did, then unfortunately I also think @Neaox answer is correct. — ThisClark, Feb 15 '15 at 21:42
I think they're talking about the scroll on the actual iframe? My problem is the page hosted within the iframe. — Donnelle, Feb 15 '15 at 21:52

Neaox · Accepted Answer · 2015-02-15T23:33:04.557

You can't apply styles to the document in the iframe as it is on a different domain. The sandboxing prevents this. My suggestion to achieve what you ask is to make the iframe width smaller so that the scrollbar is hidden.

Edit: Another solution might be to leave the iframe width as it is and wrap the iframe in another element (as you have done with the #EInvoice element) and give that wrapping element a smaller width than the iframe (15px or so less than the width of the iframe, you will have to play with this width difference to find the correct value) and apply overflow hidden to the element (as you have done to the #EInvoice element). This will cut off the scrollbar on the right.

<div id="EInvoiceWrapper">
            <div id="EInvoice" style="width:575px;overflow: hidden">
                <center>
                    <a style="display: block; width: 100%; height: 100%; background: url(API/OAL/img/btnCloseWindow.jpg) no-repeat top center;"
                        href="javascript: window.close()"></a>
                </center>
                <br />
                 <iframe id="PrintableInvoice" name="PrintableInvoice" src="https://www.whatever.com/OrderInvoice.aspx" frameborder="0" scrolling="no" style="width:590px; height:750px !important;"></iframe>
            </div>
        </div>

A-HA! Making the iframe narrower didn't work, but it put me on the right track. I made it wider, instead, and then used margin-right: -60px; on the style of the iframe. — Donnelle, Feb 15 '15 at 22:25

score 1 · Answer 2 · answered Feb 15 '15 at 21:38

You can style your document specifically for printing using media queries

@media print { 
 /* All your print styles go here */
 #header, #footer, #nav { display: none !important; } 
}

Here is a decent article that might help.

Although you can't style the hosted document, you may be able to style the iframe with a height sufficient to print the hosted document without scroll bars.

score 0 · Answer 3 · answered Feb 15 '15 at 21:37

0

Try this:

 <iframe id="PrintableInvoice" name="PrintableInvoice" src="https://www.whatever.com/OrderInvoice.aspx" frameborder="0" scrolling="no" style="width:590px; height:750px !important;" style="overflow: hidden"></iframe>

answered Feb 15 '15 at 21:37

Jackson

3,476
1
19
29

score 0 · Answer 4 · answered Feb 15 '15 at 21:56

I had similar issue long time back and here's what I tried. I hardly remember how/why I came up with that but will still share it here: My Iframe:

<div style="text-align:center; width:800px; margin:0 auto;">
<iframe id="MyView" runat="server" frameborder="0" marginheight="0" marginwidth="0" style="height:800px; width:800px"></iframe>
</div>

//Some js functions to manipulate height

$(function () {
    $("#MyView").load(function () { frameheight(); });
});
function frameheight() {
    var iFrame = document.getElementById("MyView");
    var iFrameBody;
    if (iFrame.contentDocument) {
        iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
    }
    else if (iFrame.contentWindow) {
        iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
    }
    resizeIframe(iFrameBody.scrollHeight);

}

function resizeIframe(height) {
    $("#MyView").height(parseInt(height) + 60);
}

Note: I am using it in asp.net web forms page.

Printing contents of iframe without hosted page's scrollbar

4 Answers4