in line styles for textboxes not working while printing pannel contents

Question

0.00/5 (No votes)

See more:

I'm using a pannel to print a tabel contents which also has some textboexs in it.
The problem is my inline stlyes are not working neither for table nor the textboxes.
The print function I'm using is.

<script type = "text/javascript">

function PrintPanel() {
var panel = document.getElementById("<%=pnlContents.ClientID %>");
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head>');
printWindow.document.write('</head><body >');
printWindow.document.write(panel.innerHTML);
printWindow.document.write('</body></html>');
printWindow.document.close();
setTimeout(function () {
printWindow.print();
}, 500);
return false;
}
</script>

This function is opening a new window so the style is not applied.
Please tell me how to add inline styles to this function.

Posted 13-May-15 2:45am

arunsiddhu1992

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mohibur Rashid · Accepted Answer · 2015-05-14T14:52:00

Inner HTML will return the html written inside the individual element. Certainly it won't get the other settings of the ojbject
Try to rewrite the code following way:

JavaScript

function PrintPanel() {
    var panel = document.getElementById("<%=pnlContents.ClientID %>");
    printWindow = window.open('', '', 'height=400,width=800');
    
    
    var tbl=panel.cloneNode(true);
    printWindow.window.document.body.appendChild(tbl);
    printWindow.document.close();
    setTimeout(function () {
        printWindow.print();
    }, 500);
return false;
}

I only tested it with Chrome. Also try with other browser and see if it works.

Sebastiaan Meijerink · Accepted Answer · 2015-05-14T10:32:00

Solution 1

I suggest not using inline styles, but to move the styles to a seperate css file.
In both the calling html and the new window you're creating you could then reference this stylesheet.
That is the purpose of the seperate stylesheets.

InnerHTML does not contain the styles even if they are inline.

Posted 14-May-15 10:32am

Sebastiaan Meijerink

Comments

arunsiddhu1992 15-May-15 4:18am

Yes I did the same and it's working.
Thank you.