Text color not working on window.print() in ui page

[snowtech1]

Using window.print() on UI page to have a print popup. The popup does not retain the color of the text on the UI page. Has anyone have this happen?

Any help would be useful.

Thanks in advance.

b-radctomasi

[snowtech1]

Thanks for you time.

Could you let me know the syntax for having a separate div class for this?

[snowtech1]

This made the color of another div, with a different color to be red .

[venkatiyer1]

I thought that is the only div on that page. Make the following change, it should work fine.

<style>

@media print {

div.red {

      color: red !important;

  }

</style>

And change the html of the div tag like below

<div class="red" style="text-align:left; color:red">MESSAGE</div>

[arshanapalli]

I have used a print button for window print. (My implementation is related to service portal but can fit in UI page)

In widget HTML:

<button id="print_button" onclick="window.print()">

    <img src="images/printer.gifx">Print</img>

</button>

In widget page CSS: (if you don't have a page for your widget please create one to use this solution):

@media print {

section.page {

visibility: visible;

page-break-inside: auto !important;

display: block !important;

                  width: auto !important;

height: auto !important;

overflow: visible !important;

-webkit-print-color-adjust: exact;

        }

Try to print it and you can see the background colors and borders of your custom tables.

My use-case was to view the problems(PRB…) as a table format where I have used a widget to iterate over each problem and view them as a table:

Hope this helps!!!

Thanks,

Harsha.