Border color changes when print page

Question

I'm making a web app for my work, and one of the pages is a report to be printed. I wrote a css media print to show the div border with the color grey. Only the first div of three is in that color, the other two are black when printing (In the preview the three are grey). What should I do?

Here is the code

    @media print
    {
        .relatorioDetalhe .row .col-sm {
            border:1px solid #d9d9d9 !important
        }
    }

<div class="container relatorioDetalhe">
        <div class="row">
            <div class="col-sm">
                <span class="legendaRelatorio">Número da Ocorrência</span><br>
                1
            </div>
            <div class="col-sm">
                <span class="legendaRelatorio">Data da Ocorrência</span><br>
                2019-01-21
            </div>
            <div class="col-sm">
                <span class="legendaRelatorio">Hora</span><br>
                10:30
            </div>
        </div>
    </div>

Thank you

This might be useful - https://stackoverflow.com/questions/3893986/css-media-print-issues-with-background-color — Sujit Y. Kulkarni, Jan 21 '19 at 12:26
try to rewrite your css like ".relatorioDetalhe .row .col-sm:first-child" this may help. — Prashant, Jan 21 '19 at 12:27

score 0 · Answer 1 · answered Jan 21 '19 at 15:23

0

I think it's a printer diver issue. If I print in windows it's ok, in Ubuntu it's printing wrong. Thank you all for your suggestions.

answered Jan 21 '19 at 15:23

Pedro

1
3

Border color changes when print page

1 Answers1