Bootstrap 3 - printing colors on progress bars? - css

Question

Anybody figured out how to print the colors on progress bars in bootstrap 3? Saw some hacks for 2.3.2 but I can't do it on bootstrap 3.
.progress {
background-image: none;
-webkit-print-color-adjust: exact;
box-shadow: inset 0 0;
-webkit-box-shadow: inset 0 0;
}
.progress > .progress-bar {
background-image: none;
-webkit-print-color-adjust: exact;
box-shadow: inset 0 0;
-webkit-box-shadow: inset 0 0;
}
Maybe a starting point for someone, based off of some code I found for the old workaround.

Answer 1

To build on the prior answer this is how I have the CSS setup to print from Chrome or IE. FireFox still does not work. You'll need to set up each bar color though.. info, success, etc.
#media print{
.progress{
background-color: #F5F5F5 !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#F5F5F5', endColorstr='#F5F5F5')" !important;
}
.progress-bar-info{
display: block !important;
background-color: #5BC0DE !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#5BC0DE', endColorstr='#5BC0DE')" !important;
}
.progress, .progress > .progress-bar {
display: block !important;
-webkit-print-color-adjust: exact !important;
box-shadow: inset 0 0 !important;
-webkit-box-shadow: inset 0 0 !important;
}
}
Reference:
CSS #media print issues with background-color;

Answer 2

Beside the -webkit-print-color-adjust: exact; for b.e. .progress-bar-success you will have to make the background visible also. You can do this by adding !important to the ccs rules, see: Background color not showing in print preview
Add / bind the different print style to #media print in a different style sheet.
For printing the borders / shadows of the progress bar add !important to the border-box properties too. See also: Remove shadow from printed version and text-shadow and box-shadow while printing (Chrome)

Answer 3

This is because the browser doesn't print backgrounds (with default settings), but it prints borders and we can use it!
Just try this https://stackoverflow.com/a/46216102/8601222
Edited after comments
You can add this for #media print (my LESS-CSS code):
#media print {
.progress {
position: relative;
&:before {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
border-bottom: #line-height-computed solid #gray-lighter;
}
&-bar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 1;
border-bottom: #line-height-computed solid #brand-primary;
&-success {
border-bottom-color: #brand-success;
}
&-info {
border-bottom-color: #brand-info;
}
&-warning {
border-bottom-color: #brand-warning;
}
&-danger {
border-bottom-color: #brand-danger;
}
}
}
}
Compiled CSS (with my variables):
#media print {
.progress {
position: relative;
}
.progress:before {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
border-bottom: 2rem solid #eeeeee;
}
.progress-bar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 1;
border-bottom: 2rem solid #337ab7;
}
.progress-bar-success {
border-bottom-color: #67c600;
}
.progress-bar-info {
border-bottom-color: #5bc0de;
}
.progress-bar-warning {
border-bottom-color: #f0a839;
}
.progress-bar-danger {
border-bottom-color: #ee2f31;
}
}
Works like a charm in Bootstrap 3.