css not working when print

zenon commented on Sep 15, 2017

Hi KoolReport,

I could not get the CSS work when I click print to print report. It works fine on screen but not when printing.

How to solve this?

Appreciate you help.

Thank you very much.

KoolReport commented on Sep 15, 2017

Can you be more specific. What css does not work?

zenon commented on Sep 15, 2017

It does not render the background colors when clicked on print, but on screen it renders.

KoolReport commented on Sep 15, 2017

By default the background color of the webpage will be removed when printing. There are post on stackoverflow to overcome this. I am not sure it can apply to all browsers but it seems working on Chrome ( according to the post)

https://stackoverflow.com/questions/14987496/background-color-not-showing-in-print-preview

Hope that helps.

zenon commented on Sep 15, 2017

I have look through this post before, and also several others similar articles and comments. Tried them but it still does not work. =( Colors are important for reports.

KoolReport commented on Sep 15, 2017

Do you print in color? May be using image as background can help. You can create image with your wished color then using background-image property of css to set.

zenon commented on Sep 15, 2017

In my reports, most of the tables rows and columns have different colors to differentiate the data. For example, I am only using

<style>
    .row1
    {
        background-color: #D6FFD6;
    }

    th
    {
        background-color: #FFF0D1;
    }
</style>

Will using image as background appropriate to use in tables?

No issue with css when printing reports with google charts. However, it just does not work with tables.

KoolReport commented on Sep 15, 2017

yes, you can use image for the table header. Make a small image with color, and turn on the repeated image for background.

zenon commented on Sep 18, 2017

Hi KoolReport,

I have tried to use background-image instead of background-color. It works on screen.

However, when I click print, the color did not show in table cells, but if i put the same image outside the table, it works.

Could you please help me with this?

Appreciate your help. Thanks.

KoolReport commented on Sep 18, 2017

Please check in your print settings, there should be option of "Color" or "Black and White". Choose "Color" before print.

zenon commented on Sep 18, 2017

Tried, it still does not work. Even in print preview

KoolReport commented on Sep 18, 2017

It seems pretty much depending on browser itself. The general question is "how to print a web page background in browser?" I need to investigate more to see if there is any work around.

zenon commented on Sep 18, 2017

I have found a solution, but it is very tedious. For example:

background-image: url("http://.....") !important;

Then, when in print preview, tick background options. (for Chrome) Also tested using Mozilla. Similar settings.

KoolReport commented on Sep 18, 2017

I see so that !important mark works. It help to avoid the css override from browser. Great solution. I should mark your post as "wiki'

KoolReport commented on Sep 21, 2017

I do further investigation on this issue and found out that, the color was removed by Bootstrap. You may find the css in bootstrap.css and remove all following:

@media print{
...
}

Remove all above css code, and with option of "background images and colors" from browser, you can print the color background. There is no need to use image anymore.

zenon commented on Sep 22, 2017

I have remove all @media print, replaced my code with background-color instead of background-image, clicked on print, tick option "background images and colors" at browser, the color does not appear in print preview. I am not sure whether I removed the right @media print.

KoolReport's Forum

Css not working when print #112

Build Your Excellent Data Report