print content of jquery dialog with scrollbar

Question

So I instantiate a new jquery ui dialog window with specified height where the content causes the scrollbar to appear. I have a print button within the dialog window that's meant to print all the content in the dialog window.

It currently only prints the rows that are visible.

Any ideas as to how i can print the whole lot?

VMAtm · Accepted Answer · 2011-07-15T07:51:59.110

7

Try to use css table for print, like that:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

And set height there.

Update:

Try to use jQuery.printElement jquery-plugin for your object:

$('SelectorToPrint').printElement();

edited Jul 15 '11 at 07:51

answered Jul 15 '11 at 07:44

VMAtm

27,943
17
79
125

My Jquery dialog window height is very large here...Please suggest any other way through that i can print all contents of dialog. – Pankaj Agarwal Jul 15 '11 at 07:46
@Pankaj Agarwal Updated the answer – VMAtm Jul 15 '11 at 07:52

score 0 · Answer 2 · edited May 23 '17 at 12:23

The answer by Jason on Print the contents of a DIV and the plugin he authored worked great for me.

The following is the css I added in Print.css file that I referenced to:

@media print {
.Printable {
    display: block;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    padding: 15px;
    font-size: 14px;
    line-height: 18px;
}

.Printable .Content {
    height: auto;
    overflow: auto;
    width: 700px; /* my specific requirement */
    margin: 0;
    padding: 15px;
}}

 $("#Container .Printable").printThis({
        debug: false,
        importCSS: true,
        printContainer: false,
        loadCSS: "../Print.css",``
        pageTitle: "TITLE",
        removeInline: false
    });

<link href="../Print.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/printThis.js"></script>

print content of jquery dialog with scrollbar

2 Answers2