Clever Geek Handbook

Css print media query only prints first page

I am using Print Media Query to print a scrollable DIV on my web page (Main DIV contains a sub DIV and a table with multiple rows and custom styles from a kendo grid). Window.Print () only prints one page in both IE 9 and Chromping the rest of the DIV content. How would I make sure it prints all content across multiple pages. I read similar posts for Firefox issue, but the solution is to use overflow: apparently! Important didn't work for me. Below is my style

Note. I tried with position: absolute, height / width: 100% and setting the same settings as for tables, TBody, TR and TD, but not used.

@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 was finally able to print by reading from the DOM as shown below. In case 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"));`

That being said, you can keep client-side events associated with controls on the page after recovery.

+3


source to share


3 answers


Try this: edit: using position absolute. Implemented this position: fixed only creates one page, as that works (you cannot scroll with position: fixed). The Absolute does the same, but expands.



@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;
}
+5


source 


@media print{
 html, body {
  height:100%; 
  margin: 0 !important; 
  padding: 0 !important;
  overflow: hidden;
 }
}


0


source


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

Then I found a fix, as simple as it hurts:

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

I think this might only be a solution for some edge cases, but since I didn't find this solution when I searched before and fiddled with many non-working solutions, I think it should at least be mentioned for people who do not work with "usual advice".

0


source






More articles:


All Articles