CODEWITHSUNDEEP
htmlcsstwitter-bootstrapprinting
Mathias
Mathias

Reputation: 207

colors not showing at print

how can i do so that when printing my html page it keeps the colors (print to pdf)

<table class="table table-responsive table-striped">
        <thead>
            <tr>
                <th>Elev</th>
                <th>Session navn</th>
                <th>Spørgsmål</th>
                <th>Svar</th>
                <th>Rigtigt svar</th>
                <th>Dato</th>
            </tr>
        </thead>
        <tbody>
                <tr class="success">
                        <td>test</td>
                        <td>testing</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">
                    <button class="btn btn-block btn-default" onclick="deactivate">Deaktiver</button>
                </td>
                <td style="text-align:right">#3</td>
            </tr>
        </tfoot>
    </table>

the idea is that i get the data from my database, and gets displayed in the table above. if the row is correct then it turns green by adding the success class to the row. and danger if its wrong (red and green).

this is beeing displayed great when just browsing the webpage. how ever when i try to print it. then the background colorering is off. how can i fix this?

Upvotes: 1

Views: 7749

Answers (3)

Drs. Amelia S. Greene
Drs. Amelia S. Greene

Reputation: 429

You can't print the table colors because bootstrap has a css @media print rule that prevents this. At one time, I had known a great fix I found elsewhere on the internet but when I upgraded my bootstrap version, I removed it by accident. (Hence, why I found my way here.) If you look inside your bootstrap.css file (Bootstrap Version 3.3.4, not the minimized file bootstrap.min.css) between lines 196-269 you will find the rule that does this.

196  @media print {
197  *,
198  *:before,
199  *:after {
200  background: transparent !important;
...
264  }
265  .table-bordered th,
266  .table-bordered td {
267  border: 1px solid #ddd !important;
268  }
269  }

One option would be to remove the rule entirely or remove the pragmatic lines. Problem with option one is this media rule also does things like removes the navbar and text shadows, so probably best to go with option two. I inserted my modified version of the rule below, it might still need some fine tuning and will vary if you're using a different version of bootstrap.

@media print {
    *, *:before, *:after {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a, a:visited {
        text-decoration: underline;
    }
    a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    a[href^="#"]:after, a[href^="javascript:"]:after {
        content: "";
    }
    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    thead {
        display: table-header-group;
    }
    tr, img {
        page-break-inside: avoid;
    }
    img {
        max-width: 100% !important;
    }
    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }
    h2, h3 {
        page-break-after: avoid;
    }
    select {
        background: #fff !important;
    }
    .navbar {
        display: none;
    }
    .btn> .caret, .dropup> .btn> .caret {
        border-top-color: #000 !important;
    }
}

I removed lines 200, 201, and 255-268. If you prefer to use the minimized version of bootstrap, you will need to either find the same lines there or minimize your non-minimized one. There are websites online that can do this for you, as well as many IDEs will usually have a built-in minimizer.

Upvotes: 3

Mathias
Mathias

Reputation: 207

Added the following css, and it worked

tr.success td {
    background-color: #dff0d8 !important;
    -webkit-print-color-adjust: exact;
}

tr.danger td {
    background-color: #f2dede !important;
    -webkit-print-color-adjust: exact;
}

Upvotes: 0

BenM
BenM

Reputation: 53198

The printing of background colours is a browser setting, not something that can be controlled with code.

There are plenty of knowledge base articles for the respective browsers outlining the process to enable this:

Internet Explorer > https://support.microsoft.com/en-us/kb/296326
Google Chrome > https://productforums.google.com/forum/#!topic/chrome/rywToswM-EY
Mozilla Firefox > https://support.mozilla.org/en-US/kb/how-print-websites#w_advanced-tips

Upvotes: 2

Related Questions