CODEWITHSUNDEEP
javascriptcss
Sylph
Sylph

Reputation: 1495

javascript window.print CSS @media not working

I have this JS function when user clicks on print button.

<script>
function printDiv()
{
  var printer = window.open('','','width=300,height=300');
    printer.document.open("text/html");
    printer.document.write(document.getElementById('news_contents').innerHTML);

    printer.print();

}
</script>

And I included the CSS as 

@media print {

  #news_content { 
     color: #666;
        font-size: 12px;
    font-family: Arial,Helvetica,sans-serif;
  }
}

However when user prints, the CSS did not apply. I checked the HTML header, the CSS script is indeed there. Why is it not working? When user prints from Mac, the image in the content area shrinks and became small. Anyway I can have it exactly the same as the website?

Thanks in advance.

Upvotes: 0

Views: 5231

Answers (2)

Kevin Boucher
Kevin Boucher

Reputation: 16705

I believe you are having a problem because your @media declaration is in the parent window; and you are opening a new window and appending content to it for printing.

Therefore the new document in the new window knows nothing about your @media CSS declaration.

Upvotes: 2

Tamiko
Tamiko

Reputation: 51

I have the same problem, what I did, was put the:

<style>
   @media print
   { 
     /..../
   }
</style>

Inside the DIV - I believe it's news_contents in your case.
Hope that helps.

Upvotes: 5

Related Questions