CODEWITHSUNDEEP
javascriptcsshtml
tazboy
tazboy

Reputation: 1754

How to print scrollable DIV content

There is a website that I would like to print the div content of. The problem is that the div is scrollable and I'm not able to print all the content. I've tried display:none on all the divs except the one I want to print and then used the Awesome Screenshot extension for Google Chrome but it won't scroll just that div.

I've read about using Javascript in the HTML, I'm guessing, but I don't know how to use that code. It's not my website so how do I inject that code so that it will print the content?

Upvotes: 24

Views: 63894

Answers (6)

AbhiNickz
AbhiNickz

Reputation: 1113

DANGEROUS APPROACH

Use this JS function:
Printable DIV is div1

function printpage(){
    var originalContents = document.body.innerHTML;
    var printReport= document.getElementById('div1').innerHTML;
    document.body.innerHTML = printReport;
    window.print();
    document.body.innerHTML = originalContents;
}

Upvotes: 3

Jason Kyzer
Jason Kyzer

Reputation: 11

Google messages updated their divs. Use this:

(function() {
    var originalContents = document.body.innerHTML;
    var printReport= document.querySelector("body > mw-app > mw-bootstrap > div > main > mw-main-container > div > mw-conversation-container > div > div > div > mws-messages-list")
    document.body.innerHTML = printReport.innerHTML;
    document.body.style.display = 'block';
    document.body.style.overflow = 'visible';
    window.print();
    document.body.innerHTML = originalContents;
}())

Upvotes: 0

Porschiey
Porschiey

Reputation: 2241

I'm not sure what website you're using - but in IE you can open up F12 Developer tools, find the div you want to display, and modify the style on the fly:

{
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
}

It would then cause the div to display all it's content, without scrollbars... hopefully this helps!

Upvotes: 37

DavidTaubmann
DavidTaubmann

Reputation: 3360

Make all parents visible

I've struggled some hours with this and finally noticed the problem was that some of the parent tags where preventing the div to be fully visible, and instead a scrollbar from some parent tags was being visible on the print.

So the final effective solution was to apply all the rules (mentioned in other answers) to all possible parent tags that could be in the middle, including also an !important rule so they wouldn't be bypassed.

Like this:

@media print {
  body, .CLASS-of-parent-tag, #ID-of-div-with-long-content {
    display: block !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    margin-left: 0 !important;
  }
}

This applies for almost any case in my projects.

Upvotes: 7

ManSamVampire
ManSamVampire

Reputation: 183

My answer is based on the ones given by @Porschiey and @Paul Roub with a slight addition.

Their given solution did work for me in most cases except for some where the <div> that I wanted to print had a CSS set to position: fixed. In the resulting print, this would usually contain only the content that was able to fit in the actual size of the <div> on the loaded page.
So, I also had to change the position CSS attribute to something like relative so that everything could get printed. So, the resulting CSS that worked for me is this:-

{
    display: block; /* Not really needed in all cases */
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
}

Upvotes: 1

Paul Roub
Paul Roub

Reputation: 36458

Without seeing the page or knowing its layout, it's hard to know what to suggest that won't look horrible.

But, if hiding all other content (in a print stylesheet, I assume) works, you may then be able add:

@media only print {
   #idOfYourDiv {
     width: auto;
     height: auto;
     overflow: visible;
   }
}

to show all the contents at once.

Upvotes: 14

Related Questions