Related
I'm attempting to make a printable stylesheet for our app but I'm having issues with background-color in #media print.
#media print {
#header{display:none;}
#adwrapper{display:none;}
td {
border-bottom: solid;
border-right: solid;
background-color: #c0c0c0;
}
}
Everything else works, I can modify the borders and such but background-color won't come through in the print. Now I understand that y'all might not be able to answer my question without more details. I was just curious if anyone had this issue, or something similar, before.
To enable background printing in Chrome:
body {
-webkit-print-color-adjust: exact !important;
}
Edit:
For Chrome, Safari and Firefox:
body{
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}
IF a user has "Print Background colours and images" turned off in their print settings, no CSS will override that, so always account for that. This is a default setting.
Once that is set so it will print background colours and images, what you have there will work.
It is found in different spots.
In IE9beta it's found in Print->Page Options under Paper options
In FireFox it's in Page Setup -> [Format & Options] Tab under Options.
Got it:
CSS:
box-shadow: inset 0 0 0 1000px gold;
Works for all boxes - including table cells !!!
(If the PDF-printer output file is to be believed..?)
Only tested in Chrome + Firefox on Ubuntu...
Try this, it worked for me on Google Chrome:
<style media="print" type="text/css">
.page {
background-color: white !important;
}
</style>
-webkit-print-color-adjust: exact; alone is Not enough
you have to use !important with the attribute
this is printing preview on chrome after I added !important to each background-color and color attrubute in each tag
and this is printing preview on chrome before adding !important
now, to know how to inject !important to div's style, check out this answer I'm unable to inject a style with an “!important” rule
Two solutions that work (on modern Chrome at least - haven't tested beyond):
!important right in the regular css declaration works (not even in the #media print)
Use svg
If you are looking to create "printer friendly" pages, I recommend adding "!important" to your #media print CSS. This encourages most browsers to print your background images, colors, etc.
EXAMPLES:
background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
There is another trick you can do without activating the print border option mentioned in other posts. Since borders are printed you can simulate solid background-colors with this hack:
.your-background:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: -1;
border-bottom: 1000px solid #eee; /* Make it fit your needs */
}
Activate it by adding the class to your element:
<table>
<tr>
<td class="your-background"> </td>
<td class="your-background"> </td>
<td class="your-background"> </td>
</tr>
</table>
Although this needs some extra code and some extra care to make background-colors visible, it is yet the only solution known to me.
Notice this hack won't work on elements other than display: block; or display: table-cell;, so for example <table class="your-background"> and <tr class="your-background"> won't work.
We use this to get background colors in all browsers (still, IE9+ required).
For chrome, I have used something like this and it worked out for me.
Within the body tag,
<body style="-webkit-print-color-adjust: exact;"> </body>
Or for a particular element, let's say if you have table and you want to fill a td i.e a cell,
<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
Despite !important usage being generally frowned upon, this is the offending code in bootstrap.css which prevents table rows from being printed with background-color.
.table td,
.table th {
background-color: #fff !important;
}
Let's assume you are trying to style the following HTML:
<table class="table">
<tr class="highlighted">
<td>Name</td>
<td>School</td>
<td>Height</td>
<td>Weight</td>
</tr>
</table>
To override this CSS, place the following (more specific) rule in your stylesheet:
#media print {
table tr.highlighted > td {
background-color: rgba(247, 202, 24, 0.3) !important;
}
}
This works because the rule is more specific than the bootstrap default.
I just added to the print media query this snippet and all style was applied as intended:
* {
color-adjust: exact!important;
-webkit-print-color-adjust: exact!important;
print-color-adjust: exact!important;
}
Found this issue, because I had a similar problem when trying to generate a PDF from a html output in Google Apps Script where background-colors are also not "printed".
The -webkit-print-color-adjust:exact; and !important solutions of course did not work, but the box-shadow: inset 0 0 0 1000px gold; did... great hack, thank you very much :)
Thought I'd add a recent and 2015 relevant aid from a recent print css experience.
Was able to print backgrounds and colors regardless of print dialog box settings.
To do this, I had to use a combination of !important & -webkit-print-color-adjust:exact !important to get background and colors to print properly.
Also, when declaring colors, I found the most stubborn areas needed a definition directly to your target. For example:
<div class="foo">
<p class="red">Some text</p>
</div>
And your CSS:
.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */
Tested and Working over Chrome, Firefox, Opera and Edge by 2016/10. Should work on any browser and should always look as expected.
Ok, I did a little cross-browser experiment for printing background colors. Just copy, paste & enjoy!
Here it is a full printable HTML page for bootstrap:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
/* Both z-index are resolving recursive element containment */
[background-color] {
z-index: 0;
position: relative;
-webkit-print-color-adjust: exact !important;
}
[background-color] canvas {
display: block;
position:absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<!-- CONTENT -->
<body>
<!-- PRINT ROW BLOCK -->
<div class="container">
<div class="row">
<div class="col-xs-6">
<div background-color="#A400C1">
<h4>
Hey... this works !
</h4>
<div background-color="#0068C1">
<p>
Ohh... this works recursive too !!
<div background-color="green" style="width: 80px; height: 60px">
Any size !!
</div>
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div background-color="#FFCB83" style="height: 200px">
Some content...
</div>
</div>
</div>
<script>
var containers = document.querySelectorAll("[background-color]");
for (i = 0; i < containers.length; i++)
{
// Element
var container = containers[i];
container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');
// Color
var color = container.getAttribute("background-color");
container.style.backgroundColor = color;
// Inner Canvas
var canvas = document.getElementById("canvas-" + i);
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
var ctx = canvas.getContext("2d");
ctx.fillStyle = color;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
window.print();
</script>
</body>
</html>
Best "solution" I have found is to provide a prominent "Print" button or link which pops up a small dialogue box explaining boldly, briefly and concisely that they need to adjust printer settings (with an ABC 123 bullet point instruction) to enable background and image printing. This has been very successful for me.
In some cases (blocks without any content, but with background) it can be overridden using borders, individually for every block.
For example:
.colored {
background: #000;
border: 1px solid #ccc;
width: 8px;
height: 8px;
}
#media print {
.colored div {
border: 4px solid #000;
width: 0;
height: 0;
}
}
* {
-webkit-print-color-adjust: exact;
}
Also, Enable > Emulate CSS Media From > Inspact > More Tools > Renders. Very detailed steps can be found here.
You can use the tag canvas and "draw" the background, which work on IE9, Gecko and Webkit.
If you don't mind using an image instead of a background color(or possibly an image with your background color) the solution below has worked for me in FireFox,Chrome and even IE without any over-rides. Set the image somewhere on the page and hide it until the user prints.
The html on the page with the background image
<img src="someImage.png" class="background-print-img">
The Css
.background-print-img{
display: none;
}
#media print{
.background-print-img{
background:red;
display: block;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:-10;
}
}
Do not set the background-color inside the print stylesheet. Just set the attribute in the normal css file and it works fine :)
Checkout this example: The Ultimate Print HTML Template with Header & Footer
Demo: The Ultimate Print HTML Template with Header & Footer Demo
tr.group-title {
padding-top: .5rem;
border-top: 2rem solid lightgray;
}
tr.group-title > td h5 {
margin-top: -1.9rem;
}
<tbody>
<tr class="group-title">
<td colspan="6">
<h5 align="center">{{ group.title }}</h5>
</td>
</tr>
Works in Chrome and Edge
body{
background-color: #E5FFE5;
}
.bg_print{
border-bottom: 30px solid #FFCC33;
}
.orange_bg_print_content{
margin-top: -25px;
padding: 0 10px;
}
<div class="bg_print">
</div>
<div class="orange_bg_print_content">
My Content With Background!
</div>
Tested and works in Chrome and Firefox and Edge...
I'm pretty new to html / css / asp.net so please bear with me..
I have thsi HTML code to have my custom style on a table:
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 0px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) { background-color: #dddddd; }
</style>
</head>
<table>
<tr>
<td>Deltavista</td>
<td>
<Button>Download</Button>
</td>
</tr>
</table>
This is used in a default asp.net mvc page. In the _Layout.cshtml the styles is inluded this way:
#Styles.Render("~/Content/css")
And the bundle in the BundleConfig.cs looks like:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
When I now move the code from the style tag in the head to site.css the custom style isn't applied anymore. What am I doing wrong?
try to delete the cookies in browser and files temporaries
Try to clear your browser cache, or try using a different browser to view the page. Browser caching can make you pull your hair out sometimes.
I'm attempting to make a printable stylesheet for our app but I'm having issues with background-color in #media print.
#media print {
#header{display:none;}
#adwrapper{display:none;}
td {
border-bottom: solid;
border-right: solid;
background-color: #c0c0c0;
}
}
Everything else works, I can modify the borders and such but background-color won't come through in the print. Now I understand that y'all might not be able to answer my question without more details. I was just curious if anyone had this issue, or something similar, before.
To enable background printing in Chrome:
body {
-webkit-print-color-adjust: exact !important;
}
Edit:
For Chrome, Safari and Firefox:
body{
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}
IF a user has "Print Background colours and images" turned off in their print settings, no CSS will override that, so always account for that. This is a default setting.
Once that is set so it will print background colours and images, what you have there will work.
It is found in different spots.
In IE9beta it's found in Print->Page Options under Paper options
In FireFox it's in Page Setup -> [Format & Options] Tab under Options.
Got it:
CSS:
box-shadow: inset 0 0 0 1000px gold;
Works for all boxes - including table cells !!!
(If the PDF-printer output file is to be believed..?)
Only tested in Chrome + Firefox on Ubuntu...
Try this, it worked for me on Google Chrome:
<style media="print" type="text/css">
.page {
background-color: white !important;
}
</style>
-webkit-print-color-adjust: exact; alone is Not enough
you have to use !important with the attribute
this is printing preview on chrome after I added !important to each background-color and color attrubute in each tag
and this is printing preview on chrome before adding !important
now, to know how to inject !important to div's style, check out this answer I'm unable to inject a style with an “!important” rule
Two solutions that work (on modern Chrome at least - haven't tested beyond):
!important right in the regular css declaration works (not even in the #media print)
Use svg
If you are looking to create "printer friendly" pages, I recommend adding "!important" to your #media print CSS. This encourages most browsers to print your background images, colors, etc.
EXAMPLES:
background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
There is another trick you can do without activating the print border option mentioned in other posts. Since borders are printed you can simulate solid background-colors with this hack:
.your-background:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: -1;
border-bottom: 1000px solid #eee; /* Make it fit your needs */
}
Activate it by adding the class to your element:
<table>
<tr>
<td class="your-background"> </td>
<td class="your-background"> </td>
<td class="your-background"> </td>
</tr>
</table>
Although this needs some extra code and some extra care to make background-colors visible, it is yet the only solution known to me.
Notice this hack won't work on elements other than display: block; or display: table-cell;, so for example <table class="your-background"> and <tr class="your-background"> won't work.
We use this to get background colors in all browsers (still, IE9+ required).
For chrome, I have used something like this and it worked out for me.
Within the body tag,
<body style="-webkit-print-color-adjust: exact;"> </body>
Or for a particular element, let's say if you have table and you want to fill a td i.e a cell,
<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>
Despite !important usage being generally frowned upon, this is the offending code in bootstrap.css which prevents table rows from being printed with background-color.
.table td,
.table th {
background-color: #fff !important;
}
Let's assume you are trying to style the following HTML:
<table class="table">
<tr class="highlighted">
<td>Name</td>
<td>School</td>
<td>Height</td>
<td>Weight</td>
</tr>
</table>
To override this CSS, place the following (more specific) rule in your stylesheet:
#media print {
table tr.highlighted > td {
background-color: rgba(247, 202, 24, 0.3) !important;
}
}
This works because the rule is more specific than the bootstrap default.
I just added to the print media query this snippet and all style was applied as intended:
* {
color-adjust: exact!important;
-webkit-print-color-adjust: exact!important;
print-color-adjust: exact!important;
}
Found this issue, because I had a similar problem when trying to generate a PDF from a html output in Google Apps Script where background-colors are also not "printed".
The -webkit-print-color-adjust:exact; and !important solutions of course did not work, but the box-shadow: inset 0 0 0 1000px gold; did... great hack, thank you very much :)
Thought I'd add a recent and 2015 relevant aid from a recent print css experience.
Was able to print backgrounds and colors regardless of print dialog box settings.
To do this, I had to use a combination of !important & -webkit-print-color-adjust:exact !important to get background and colors to print properly.
Also, when declaring colors, I found the most stubborn areas needed a definition directly to your target. For example:
<div class="foo">
<p class="red">Some text</p>
</div>
And your CSS:
.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */
Tested and Working over Chrome, Firefox, Opera and Edge by 2016/10. Should work on any browser and should always look as expected.
Ok, I did a little cross-browser experiment for printing background colors. Just copy, paste & enjoy!
Here it is a full printable HTML page for bootstrap:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
/* Both z-index are resolving recursive element containment */
[background-color] {
z-index: 0;
position: relative;
-webkit-print-color-adjust: exact !important;
}
[background-color] canvas {
display: block;
position:absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<!-- CONTENT -->
<body>
<!-- PRINT ROW BLOCK -->
<div class="container">
<div class="row">
<div class="col-xs-6">
<div background-color="#A400C1">
<h4>
Hey... this works !
</h4>
<div background-color="#0068C1">
<p>
Ohh... this works recursive too !!
<div background-color="green" style="width: 80px; height: 60px">
Any size !!
</div>
</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div background-color="#FFCB83" style="height: 200px">
Some content...
</div>
</div>
</div>
<script>
var containers = document.querySelectorAll("[background-color]");
for (i = 0; i < containers.length; i++)
{
// Element
var container = containers[i];
container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');
// Color
var color = container.getAttribute("background-color");
container.style.backgroundColor = color;
// Inner Canvas
var canvas = document.getElementById("canvas-" + i);
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
var ctx = canvas.getContext("2d");
ctx.fillStyle = color;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
window.print();
</script>
</body>
</html>
Best "solution" I have found is to provide a prominent "Print" button or link which pops up a small dialogue box explaining boldly, briefly and concisely that they need to adjust printer settings (with an ABC 123 bullet point instruction) to enable background and image printing. This has been very successful for me.
In some cases (blocks without any content, but with background) it can be overridden using borders, individually for every block.
For example:
.colored {
background: #000;
border: 1px solid #ccc;
width: 8px;
height: 8px;
}
#media print {
.colored div {
border: 4px solid #000;
width: 0;
height: 0;
}
}
* {
-webkit-print-color-adjust: exact;
}
Also, Enable > Emulate CSS Media From > Inspact > More Tools > Renders. Very detailed steps can be found here.
You can use the tag canvas and "draw" the background, which work on IE9, Gecko and Webkit.
If you don't mind using an image instead of a background color(or possibly an image with your background color) the solution below has worked for me in FireFox,Chrome and even IE without any over-rides. Set the image somewhere on the page and hide it until the user prints.
The html on the page with the background image
<img src="someImage.png" class="background-print-img">
The Css
.background-print-img{
display: none;
}
#media print{
.background-print-img{
background:red;
display: block;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:-10;
}
}
Do not set the background-color inside the print stylesheet. Just set the attribute in the normal css file and it works fine :)
Checkout this example: The Ultimate Print HTML Template with Header & Footer
Demo: The Ultimate Print HTML Template with Header & Footer Demo
tr.group-title {
padding-top: .5rem;
border-top: 2rem solid lightgray;
}
tr.group-title > td h5 {
margin-top: -1.9rem;
}
<tbody>
<tr class="group-title">
<td colspan="6">
<h5 align="center">{{ group.title }}</h5>
</td>
</tr>
Works in Chrome and Edge
body{
background-color: #E5FFE5;
}
.bg_print{
border-bottom: 30px solid #FFCC33;
}
.orange_bg_print_content{
margin-top: -25px;
padding: 0 10px;
}
<div class="bg_print">
</div>
<div class="orange_bg_print_content">
My Content With Background!
</div>
Tested and works in Chrome and Firefox and Edge...
I use following css in my table:
.lh1 {
line-height: 50px;
}
And my table looks like this:
<table class="table table-bordered lh lh1">
..
..
..
</table>
But no matter which value I use for line-height, my table doesn't change at all. Other .css in this table is working fine.
What could be the cause of that problem?
You need to do it like this.
CSS
.lh1 > tbody > tr > td {
line-height: 50px;
}
your CSS is not overwriting the bootstrap CSS. Here is the demo
try with:
.lh1 {
line-height: 50px !important;
}
Your bootstrap may override this
my problem is, that I have two different html files with a table containing theader, tfooter and tbody.
the first one is my own creation for test reasons and it looks like this:
<html>
<head>
<title>The Invoice</title>
<style type="text/css">
table.invoice { background-color: #dddddd; font-family: sans-serif; }
td, th { background-color: #ffffff; padding: 5pt; }
td.unit { text-align: right; }
td.price { text-align: right; }
thead { display: table-header-group; }
tfoot th { text-align: right; }
</style>
</head>
<body>
<div style="width:auto !important; overflow:hidden; position:relative">
<table class="invoice" cellspacing="1" cellpadding="0">
<thead>
<th>Unit</th>
<th>Description</th>
<th>Price</th>
</thead>
<tfoot>
<tr>
<th colspan="2">Sum</th>
<td class="price">1.230,32 EUR</td>
</tr>
</tfoot>
<tbody>
<tr><td>1</td><td>Excel</td><td >150,00 EUR</td></tr>
<tr><td>2</td><td>Document</td><td>150,00 EUR</td></tr>
... and so on ...
</tbody>
</table>
</div>
</body>
</html>
whenever I try the print preview on IE9 it shows the tfoot on the last page (page 5 in my case) which shows the overall sum of the body content price column.
when I try the same in Mozilla Firefox 11.0 it shows the tfoot with the overall sum on every page which I don't want of course.
the main reason I'm asking is because I have a FreeAgent html dom where I want to print out some Invoice. With that html file even IE9 shows the tfoot on every page, which, again!, I don't want.
I played around with
#media print { tfoot { display: table-footer-group;
position: absolute;
bottom: 0; }}
there it shows the footer just once, but on the first page at the bottom left all accross the rest of my text ...
ideas or solutions much appreciated! :)
Try this CSS in your print stylesheet, it will make the tfoot act as another row yet keeping the proper syntax that something like Datatables.net needs.
table tfoot{display:table-row-group;}
The tfoot is actually supposed to "always be visible at the bottom" (or something along those lines), so it makes sense for Firefox to print the footer at the bottom of the table on every page.
In particular this is useful for if you have table header cells to name columns, or are using the footer as a label or repeated headers.
You should probably have your sum as just another row on the end of the table.