css print media query prints only first page

Question

I use Print Media Query to print a scrollable DIV on my webpage (Main DIV contains a sub DIV and table with several rows and custom styles from kendo grid). The window.Print() only prints one page in both IE 9 and Chrome chopping rest of the DIV contents. How would I make sure it prints all contents in multiple pages. I read similar posts for issue with Firefox but the solution of using overflow: visible !important did not work for me. Below is my style

Note: I've tried with position: absolute, height/width: 100% and setting same settings as below for Table, TBody, TR and TD, but no use.

@media print {

body * {
    visibility: hidden;
  }

#divname, #divname* {
    visibility: visible;
  }

#divname
    {
        overflow: visible !important; 
        float:none !important;
        position: fixed;
        left: 0px;
        top: 0px;
        display:block !important;
        /*height:auto !important;*/
    }
}

EDIT: I finally managed to print by reading from DOM like below. In case, if it helps someone

    `//get DIV content as clone
    var divContents = $("#DIVNAME").clone();
    //detatch DOM body
    var body = $("body").detach();
    //create new body to hold just the DIV contents
    document.body = document.createElement("body");
    //add DIV content to body
    divContents.appendTo($("body"));
    //print body
    window.print();
    //remove body with DIV content
    $("html body").remove();
    //attach original body
    body.appendTo($("html"));`

With this, you can retain the client side events associated to the controls on page after rebinding.

I came up with an alternative solution, which is simply to open a new window, stuff the HTML into it, and print it. Works fine for me. — , May 19 '16 at 09:33

ktzhang · Accepted Answer · 2014-08-07T19:06:39.620

31

Try this: edit: using position absolute. Realized that position:fixed only creates one page since thats how it works (you cannot scroll with position:fixed). Absolute does the same thing but is expandable.

@media print {
    body * {
        visibility: hidden;
    }
    #divname, #divname * {
        visibility: visible;
    }
    #divname {
        left: 0px;
        top: 0px;
        position:absolute;
    }
    p {
        page-break-before: always;
    }
}
.para {
    font-size:x-large;
    height:3000px;
}

edited Aug 07 '14 at 19:06

answered Aug 07 '14 at 16:36

ktzhang

4,069
2
19
18

Including height did not make a difference. – Raja Aug 07 '14 at 16:44
1

Ok let me try it out. Can you post this example code somewhere? need more context – ktzhang Aug 07 '14 at 16:49
Here is the fiddle http://jsfiddle.net/iamraja/bsbbq248/ . The content of the body is very long so that it spans across multiple pages. However, the print only prints one page. – Raja Aug 07 '14 at 17:22
Print on the fiddle above works fine after removing position: fixed; attribute. But in my actual print, I need that to align the grid/table in the div to the left of the page. Also, even without the position attribute, it still prints one page. I could not include the original code due to security reasons. Any ideas? – Raja Aug 07 '14 at 18:42
sorry this is the first time I using fiddle and i might have over written your code, can you pls double check if I did not remove anything you added? – Raja Aug 07 '14 at 18:43
its fine, replace css with above^ – ktzhang Aug 07 '14 at 18:47
Works on that fiddle. But does not work in my actual code. No content is displayed on print until position: fixed attribute is added. And then prints just one page. Any clue? – Raja Aug 07 '14 at 18:58
try above answer again :P, i use position absolute instead of fixed. – ktzhang Aug 07 '14 at 19:06
1

In my original code, there is no
. It's just a long table with several tr's. How to apply break on it? Also, what happens when there are multiple @media print styles? (i.e one for each 3rd party component used in the project)
– Raja Aug 07 '14 at 19:17
for page break, you can just add a new
element, and do .pageBreak { page-break-before:always }. If there are third party media print styles... then im not sure :P – ktzhang Aug 07 '14 at 19:19
print:absolute does it for me on the parent container of the content I wish to print. – Bernie Davies Oct 09 '18 at 21:09

score 26 · Answer 2 · answered Dec 01 '19 at 14:02

26

CSS

@media print {
  * { overflow: visible !important; } 
  .page { page-break-after:always; }
}

HTML

<div>
  <div class="page">
    Page 1 Contents
  </div>
  <div class="page">
    Page 2 Contents
  </div>
</div>

answered Dec 01 '19 at 14:02

Rahul Uttarkar

3,367
3
35
40

11

The `* { overflow: visible !important; } ` has helped in my case, thank you! – Ofelia Muradova Apr 02 '20 at 12:57
It helped me too, but I didnt have to separate the content into multiple div tags one per page.. – Bakavani Jan 03 '22 at 18:35

Dennis Richter · Answer 3 · 2022-09-08T10:00:56.280

I got the same problem right now and tried almost everything (clearing floats, avoiding absolute positioning, adding overflows, ...) without any effect.

Then I found a fix, so simple that it hurts:

body, #main-container {
  height: auto;
}

I think this may is the solution only for some edge cases, but as I didn't find this solution when I was searching before and fiddling around with many non-working-solutions, I think it should at least be mentioned for people that don't get it working with the "usual tips".

score 3 · Answer 4 · answered Apr 01 '21 at 18:57

You can force Chrome to emulate "print" mode, which makes it much easier to troubleshoot these finicky @media print issues:

Using Chrome's Element Inspector in Print Preview Mode?

Once it's enabled, you can change the CSS for the print view on the fly and see what'll work for you.

css print media query prints only first page

4 Answers4

Linked