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?
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.
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>
