CSS is not applied for print

Question 1

I am trying to apply css for print page.

I have tried with several options like

<style type = "text/css">
 @media print
 {
 body {
 color : #eee !important;
 font-size : 2em;
 }
 }
</style>

Here is my html code inside JS

newWin.document.write('<html><body onload="window.print()"><div style="border-bottom : 1px solid #000;margin-bottom :20px;"><div style="" ><p><lable>Name :</lable><span><b>'+name+'</b></span></p><p><lable>Mobile Number :</lable><span><b>'+mobile_number+'</b></span></p><p><lable>Age :</lable><span><b>'+age+'</b></span></p><p><lable>Gender :</lable><span><b>'+gender+'</b></span></p></div><div class="col-md-4"><p><lable>Prescribed By :</lable><span><b>'+doctor+'</b></span></p><p><lable>Prescribed Date :</lable><span><b>'+date+'</b></span></p></div></div><div class="col-md-12"><p><lable>Illness :</lable><span><b>'+illness+'</b></span></p><p><lable>Allergy :</lable><span><b>'+allergy+'</b></span></p><p><lable>Social History :</lable><span><b>'+social_history+'</b></span></p><p><lable>Old Medicine :</lable><span><b>'+old_medicine+'</b></span></p><p><lable>Old Diagnosis :</lable><span><b>'+old_diagnosis+'</b></span></p><p><lable>New Medicine :</lable><span><b>'+new_medicine+'</b></span></p><p><lable>New Diagnosis :</lable><span><b>'+new_diagnosis+'</b></span></p></div></body></html>');

But didn't worked. Anybody help please ?

Question 2

refer this stackoverflow.com/a/28596805/6108882

Question 3

@UdhayTitus...I have already use !important in my style. But didn't work

Question 4

your code is working very well can you post your html here. or check the fiddle here jsfiddle.net/ou054d27

Question 5

Udhay Titus.... I have updated my post with html code

Question 6

I too can confirm that the jsfiddle given by Udhay Titus is working on Latest Firefox Deskop Browser. If just the color part isn't working then please check your print options. Print might have been set to black & white. It's just a hunch that I have.

Question 7

add your css in your js surely it will works. check here https://jsfiddle.net/Udhaytitus/ou054d27/3/

function printData()
{
 /*newWin= window.open("");
 newWin.document.write('<html><style>@media print{body {color : #eee !important;font-size : 12em; padding:10px;}}</style><body onload="window.print()"><div>This is test print page.</div></body></html>');
 newWin.print();
 newWin.close();*/
window.document.write('<html><style>@media print{body {color : #eee !important;font-size : 12em;border:1px solid #000; padding:77px;}}</style><body onload="window.print()"><div>This is test print page.</div></body></html>');
 window.print();
 window.close();
 
}
$('#btnPrint').on('click',function(){
printData();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="print" id="btnPrint"/>

Question 8

window.open("") does not work in stack snippet (for me), and returns null. Better use window.document.write() and window.print()

Question 9

@UdhayTitus...Ur's one is correct. But one ques. float, border, padding...aren't these attribute working for print css ? In my code it isn't working

Question 10

@UdhayTitus... it works....I accept the answer...But my problem is not solved yet... Cz all css attributes are not work may b. Cz I applied border-bottom attribute...but not works properly...some other attributes also didn't work.

Question 11

@UdhayTitus....Please another help. I want to print where two div with two different color, background-color and padding.....

Question 12

Yes it works perfectly now....Use overflow:hidden and all the attributes work correctly.

Udhay Titus 5,8674 gold badges26 silver badges42 bronze badges · Accepted Answer · 2019-02-14 09:35:48Z

add your css in your js surely it will works. check here https://jsfiddle.net/Udhaytitus/ou054d27/3/

function printData()
{
 /*newWin= window.open("");
 newWin.document.write('<html><style>@media print{body {color : #eee !important;font-size : 12em; padding:10px;}}</style><body onload="window.print()"><div>This is test print page.</div></body></html>');
 newWin.print();
 newWin.close();*/
window.document.write('<html><style>@media print{body {color : #eee !important;font-size : 12em;border:1px solid #000; padding:77px;}}</style><body onload="window.print()"><div>This is test print page.</div></body></html>');
 window.print();
 window.close();
 
}
$('#btnPrint').on('click',function(){
printData();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="print" id="btnPrint"/>

window.open("") does not work in stack snippet (for me), and returns null. Better use window.document.write() and window.print()
@UdhayTitus...Ur's one is correct. But one ques. float, border, padding...aren't these attribute working for print css ? In my code it isn't working
@UdhayTitus... it works....I accept the answer...But my problem is not solved yet... Cz all css attributes are not work may b. Cz I applied border-bottom attribute...but not works properly...some other attributes also didn't work.
@UdhayTitus....Please another help. I want to print where two div with two different color, background-color and padding.....
Yes it works perfectly now....Use overflow:hidden and all the attributes work correctly.

CollectivesTM on Stack Overflow

CSS is not applied for print

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related