7

Have an application that draws divs with background color as its graphics.
These divs appear fine on screen but the divs disappear when printing to PDF.

Traced the problem to Twitter Bootstrap CSS. The divs print fine when Bootstrap CSS is not present. But don't print when it is. See this JSFiddle:

http://jsfiddle.net/VYg9s/

I think the problem is this section of Twitter CSS. I think I need to override the background: transparent !important but can't for the life of me figure out how.

This is presumably simple. Tried background: opaque !important but that didn't work, and I can't seem to find a list of allowable values for the background property.

@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

What's the opposite of background: transparent !important; in CSS?

prototype
  • 7,249
  • 15
  • 60
  • 94

2 Answers2

9

The opposite of background: transparent !important; is background: color hex code !important;

"color hex code" can be any CSS acceptable color code type; like rgb, rgba, hexadecimal, etc.

DrCord
  • 3,917
  • 3
  • 34
  • 47
  • 1
    Why would this deserve a -1, this is correct and I had trouble formatting it on mobile but it is fine now.. – DrCord Dec 12 '13 at 03:42
  • 1
    (The -1 was not from me the OP.) Thanks, this works! *BUT* The actual app has lots of different divs with different colors that disappear as a result of Bootstrap's transparency directive. What I can do with effort is add the color back for each one. Whereas the Twitter CSS added transparency globally. Might there be a way to set them opaque globally? – prototype Dec 12 '13 at 03:46
  • 1
    @user645715 if you don't want Bootstrap doing it at all, you should just delete it from the bootstrap.css file :) – Ming Jun 20 '14 at 03:13
  • Agreed! This case was an OEM RIA that clients include in their site, so needs to play well with other styles that might be there, and that client used Bootstrap. – prototype Jun 20 '14 at 04:12
  • 3
    The question isn't really specifically about bootstrap but about overriding css values. Furthermore deleting values from the bootstrap file makes it a more complicated process to upgrade (you essentially become a personal fork maintainer), as your changes have to be checked against the new version and carried over. – DrCord Jun 20 '14 at 15:08
-1

To keep the bootstrap.css untouched this is a way to win the 'who overwriting css slam' by inject media print css with jquery at bottom of head ...

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CssTest</title>
    <link href="/libs/dev/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <script src="/libs/dev/common.js"></script>
</head>
<body>
    <button>Test Change / Add Dynamic</button><br />
    <br />
    <div id="test1" style="background-color: red; display: block; width: 500px; height: 100px">
        HELLO
    </div>
    <div id="test2" style="background-color: green; display: block; width: 500px; height: 100px">
        HELLO
    </div>
    <div id="test3" style="background-color: orange; display: block; width: 500px; height: 100px">
        HELLO
    </div>

    <script>
        var app = {};
        app.updatePrintCSS = function (items) {
            $("[data-role='printAdded']").remove();
            $(items).each(function (i, e) {
                var data = "@@media print{#" + $(e).attr("id") + "{ background-color: " + $(e).css("background-color") + " !important; }}";
                $("<style data-role='printAdded'></style>").appendTo("head").html(data);
            });
        }
        $(function () {
            app.updatePrintCSS($("div"));
            $("button").on("click", function (e) {
                $("#test3").css("background-color", "#FF69B4 !important");
                $("body").append($('<div id="test4" style="background-color: blue; display: block; width: 500px; height: 100px" >HELLO</div>'));
                app.updatePrintCSS($('div'));
            });
        });
    </script>
</body>
</html>
iqmeta
  • 1