I am trying to print a page. In that page I have given a table a background color.
When I view the print preview in chrome its not taking on the background color property...
So I tried this property:
-webkit-print-color-adjust: exact;
but still its not showing the color.
http://jsfiddle.net/TbrtD/
.vendorListHeading {
background-color: #1a4567;
color: white;
-webkit-print-color-adjust: exact;
}
<div class="bs-docs-example" id="soTable" style="padding-top: 10px;">
<table class="table" style="margin-bottom: 0px;">
<thead>
<tr class="vendorListHeading" style="">
<th>Date</th>
<th>PO Number</th>
<th>Term</th>
<th>Tax</th>
<th>Quote Number</th>
<th>Status</th>
<th>Account Mgr</th>
<th>Shipping Method</th>
<th>Shipping Account</th>
<th style="width: 184px;">QA</th>
<th id="referenceSO">Reference</th>
<th id="referenceSO" style="width: 146px;">End-User Name</th>
<th id="referenceSO" style="width: 118px;">End-User's PO</th>
<th id="referenceSO" style="width: 148px;">Tracking Number</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>22</td>
<td>20130000</td>
<td>Jim B.</td>
<td>22</td>
<td>510 xxx yyyy</td>
<td>zznn#abc.co</td>
<td>PDF</td>
<td>12/23/2012</td>
<td>Approved</td>
<td>PDF</td>
<td id="referenceSO">12/23/2012</td>
<td id="referenceSO">Approved</td>
</tr>
</tbody>
</table>
</div>
The CSS property print-color-adjust: exact; works appropriately.
However, making sure you have the correct CSS for printing can often be tricky. Several things can be done to avoid the difficulties you are having. First, separate all your print CSS from your screen CSS. This is done via the #media print and #media screen.
Often times just setting up some extra #media print CSS is not enough because you still have all your other CSS included when printing as well. In these cases you just need to be aware of CSS specificity as the print rules don't automatically win against non-print CSS rules.
In your case, the print-color-adjust: exact is working. However, your background-color and color definitions are being beaten out by other CSS with higher specificity.
While I do not endorse using !important in nearly any circumstance, the following definitions work properly and expose the problem:
#media print {
tr.vendorListHeading {
background-color: #1a4567 !important;
print-color-adjust: exact;
}
}
#media print {
.vendorListHeading th {
color: white !important;
}
}
Here is the fiddle (and embedded for ease of print previewing).
That CSS property is all you need it works for me...When previewing in Chrome you have the option to see it BW and Color(Color: Options- Color or Black and white) so if you don't have that option, then I suggest to grab this Chrome extension and make your life easier:
https://chrome.google.com/webstore/detail/print-background-colors/gjecpgdgnlanljjdacjdeadjkocnnamk?hl=en
The site you added on fiddle needs this in your media print css (you have it just need to add it...
media print CSS in the body:
#media print {
body {-webkit-print-color-adjust: exact;}
}
UPDATE
OK so your issue is bootstrap.css...it has a media print css as well as you do....you remove that and that should give you color....you need to either do your own or stick with bootstraps print css.
When I click print on this I see color....
http://jsfiddle.net/rajkumart08/TbrtD/1/embedded/result/
Chrome will not render background-color, or several other styles, when printing if the background graphics setting is turned off.
This has nothing to do with css, #media, or specificity. You can probably hack your way around it, but the easiest way to get chrome to show the background-color and other graphics is to properly check this checkbox under More Settings.
I just needed to add the !important attribute onto the the background-color tag in order for it to show up, did not need the webkit part:
background-color: #f5f5f5 !important;
Your CSS must be like this:
#media print {
body {
-webkit-print-color-adjust: exact;
}
}
.vendorListHeading th {
background-color: #1a4567 !important;
color: white !important;
}
FOR THOSE USING BOOTSTRAP.CSS, this is the fix!
I have tried all the solutions and they weren't working... until I discovered that bootstrap.css had a super annoying #media print that resets all your colors, background-colors, shadows, etc...
#media print{*,:after,:before{color:#000!important;text-shadow:none!important;background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important}
So either remove this section from bootstrap.css (or bootstrap.min.css)
Or override these values in the css of the page you want to print in your own #media print
#media print {
body {
-webkit-print-color-adjust: exact;
}
.customClass{
//customCss + !important;
}
//more of your custom css
}
For IE
If you are using IE then go to print preview ( right click on document -> print preview ), go to settings and there is option "print background color and images", select that option and try.
If you are using bootstrap or any other 3rd party CSS, make sure you specify the media screen only on it, so you have the control of the print media type in your own CSS files:
<link rel="stylesheet" media="screen" href="">
if you are using Bootstrap.just use this code in your custom css file. Bootstrap removes all your colors in print preview.
#media print{
.box-text {
font-size: 27px !important;
color: blue !important;
-webkit-print-color-adjust: exact !important;
}
}
Are your sure this is a css issue ? There are some posts on google around this issue:
http://productforums.google.com/forum/#!category-topic/chrome/discuss-chrome/eMlLBcKqd2s
It may be related to the print process. On safari, which is webkit also, there is a checkbox to print background images and colors in the printer dialog.
Use the following in your #media print style sheet.
h1 {
background-color:#404040;
background-image:url("img/404040.png");
background-repeat:repeat;
box-shadow: inset 0 0 0 1000px #404040;
border:30px solid #404040;
height:0;
width:100%;
color:#FFFFFF !important;
margin:0 -20px;
line-height:0px;
}
Here are a couple things to note:
background-color is the absolute fallback and is there for posterity mostly.
background-image uses a 1px x 1px pixel of #404040 made into a PNG. If the user has images enabled it may work, if not...
Set the box-shadow, if that doesn't work...
Border = 1/2 your desired height and/or width of box, solid, color. In the example above I wanted a 60px height box.
Zero out the heigh/width depending on what you're controlling in the border attribute.
Font color will default to black unless you use !important
Set line-height to 0 to fix for the box not having physical dimension.
Make and host your own PNGs :-)
If the text in the block needs to wrap, put it in a div and position the div using position:relative; and remove line-height.
See my fiddle for a more detailed demonstration.
There's a style in the bootstrap css files under #media print{*,:after,:before ....} that has color and background styles labeled !important, which remove any background colors on any elements. Kill those two pieces of css and it will work.
Bootstrap is making the executing decision that you should never have any background color in prints, so you have to edit their css or have another !important style that is a higher precedence. Good job bootstrap...
I used purgatory101's answer but had trouble keeping all colours (icons, backgrounds, text colours etc...), especially that CSS stylesheets cannot be used with libraries which dynamically change DOM element's colours. Therefore here is a script that changes element's styles (background-colour and colour) before printing and clears styles once printing is done. It is useful to avoid writing a lot of CSS in a #media print stylesheet as it works whatever the page structure.
There is a part of the script that is specially made to keep FontAwesome icons color (or any element that uses a :before selector to insert coloured content).
JSFiddle showing the script in action
Compatibility: works in Chrome, I did not test other browsers.
function setColors(selector) {
var elements = $(selector);
for (var i = 0; i < elements.length; i++) {
var eltBackground = $(elements[i]).css('background-color');
var eltColor = $(elements[i]).css('color');
var elementStyle = elements[i].style;
if (eltBackground) {
elementStyle.oldBackgroundColor = {
value: elementStyle.backgroundColor,
importance: elementStyle.getPropertyPriority('background-color'),
};
elementStyle.setProperty('background-color', eltBackground, 'important');
}
if (eltColor) {
elementStyle.oldColor = {
value: elementStyle.color,
importance: elementStyle.getPropertyPriority('color'),
};
elementStyle.setProperty('color', eltColor, 'important');
}
}
}
function resetColors(selector) {
var elements = $(selector);
for (var i = 0; i < elements.length; i++) {
var elementStyle = elements[i].style;
if (elementStyle.oldBackgroundColor) {
elementStyle.setProperty('background-color', elementStyle.oldBackgroundColor.value, elementStyle.oldBackgroundColor.importance);
delete elementStyle.oldBackgroundColor;
} else {
elementStyle.setProperty('background-color', '', '');
}
if (elementStyle.oldColor) {
elementStyle.setProperty('color', elementStyle.oldColor.value, elementStyle.oldColor.importance);
delete elementStyle.oldColor;
} else {
elementStyle.setProperty('color', '', '');
}
}
}
function setIconColors(icons) {
var css = '';
$(icons).each(function (k, elt) {
var selector = $(elt)
.parents()
.map(function () { return this.tagName; })
.get()
.reverse()
.concat([this.nodeName])
.join('>');
var id = $(elt).attr('id');
if (id) {
selector += '#' + id;
}
var classNames = $(elt).attr('class');
if (classNames) {
selector += '.' + $.trim(classNames).replace(/\s/gi, '.');
}
css += selector + ':before { color: ' + $(elt).css('color') + ' !important; }';
});
$('head').append('<style id="print-icons-style">' + css + '</style>');
}
function resetIconColors() {
$('#print-icons-style').remove();
}
And then modify the window.print function to make it set the styles before printing and resetting them after.
window._originalPrint = window.print;
window.print = function() {
setColors('body *');
setIconColors('body .fa');
window._originalPrint();
setTimeout(function () {
resetColors('body *');
resetIconColors();
}, 100);
}
The part that finds icons paths to create CSS for :before elements is a copy from this SO answer
I tried all suggested solutions here (and in many other questions), such as applied background-color: #000 !important; both in stylesheet and inline, or set
#media print {
* {
color-adjust: exact !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
}
, even combined them together, but nothing worked.
After hours of researching without any results, I recognized that the "bug" lost background-color only appears on table (th, td), but other HTML elements (div,...) or other CSS attributes (border-color,...) still work.
Therefore, I came up with a "hack" to wrap-up anything inside <th> or <td> with a <div> (you can adjust padding to make it display same as prior).
Here I used React and makeStyles of #material-ui/core.
JSX:
<Table bordered>
<thead className={classes.thead}>
<tr>
<th><div>Col 1</div></th>
<th><div>Col 2</div></th>
<th><div>Col 3</div></th>
</tr>
</thead>
<tbody>
<tr>
<td className={classes.tdGreen}><div>Row 1 - Col 1</div></td>
<td><div>Row 1 - Col 2</div></td>
<td><div>Row 1 - Col 3</div></td>
</tr>
<tr>
<td><div>Row 2 - Col 1</div></td>
<td className={classes.tdBlue}><div>Row 2 - Col 2</div></td>
<td><div>Row 2 - Col 3</div></td>
</tr>
</tbody>
</Table>
Styles:
const useStyles = makeStyles(() => ({
thead: {
textAlign: 'center',
'& th:not(:last-child)': {
padding: '0',
'& > div': {
padding: '.75rem',
backgroundColor: '#D8D8D8 !important',
}
}
},
tdGreen: {
padding: '0 !important',
'& > div': {
padding: '.75rem',
color: 'white',
backgroundColor: 'green !important',
}
},
tdBlue: {
padding: '0 !important',
'& > div': {
padding: '.75rem',
color: 'white',
backgroundColor: 'blue !important',
}
}
}));
You can take the idea and convert it into pure HTML/CSS solutions.
Hope this can help anyone struggled with this issue!
You can also use the box-shadow property.
The best solution for this if you are using bootstrap so just do one thing remove #media print {} all code inside this. and enable background graphics from more settings while taking print preview.
You can use inline css styles with !important.
Eg.
<p style="background:red!important">ABCD</p>
If you are using nextjs or react add this to the global css:
#media print {
body {
-webkit-print-color-adjust: exact;
}
}
This worked for me.
you can download bootstrap 4 css from bootstrap web and looking on the bottom code
look where code is
and remove this css style because this override your css color table style
If you download Bootstrap without the "Print media styles" option, you will not have this problem and do not have to remove the "#media print" code manually in your bootstrap.css file.
I double load my external css source file and change the media="screen" to media="print" and all the borders for my table were shown
Try this :
<link rel="stylesheet" media="print" href="bootstrap.css" />
<link rel="stylesheet" media="screen" href="bootstrap.css" />
I am having two problems, one of them odd and the other confusing.
Firstly I have basically the same code in two pages and in one page it works and in the other it comes up with an error.
echo "<td style='width: 800px'>" . '<img height="100" width="100" src="data:image/jpeg;base64,'.base64_encode( $row[photo] ).'" >' . "</td>";
This comes up with the error Use of undefined constant photo - assumed 'photo'.
Which to me means syntax error but for the life of me I cannot work out what needs to be done.php/html syntax can absolutely baffle the hell out of me.
The second problem is just an odd problem.
a:link {
color: black;
}
Links are black.
a:hover {
color: #4cff00 ;
}
links turn green when the mouse is hovered on them.
a:visited {
color:black;
}
Links are no longer green when hovered over but instead are always black. I would like them to be green when hovered over but black at every other time, I cannot seem to get this.
Use $row["photo"] for your first problem. Add quotes or double quetes around your key photo, because if not, php parse as a constant.
For your css problem:
a:link, a:active, a:visited {color: #000}
a:hover {color: #4cff00;}
You need to set all other cases to black with pesudo codes.
try with -
base64_encode( $row["photo"] );
So I've looked around quite a bit for an example to this but I couldn't find anything for what exactly I am trying to do.
I'm building a blog with the front page having a bunch of posts in order like this -
http://prntscr.com/1vjoun
The blogs vary in size based on how much text is in them -
http://prntscr.com/1vjozq
When you hover over a blog I am trying to make a small bar appear inside of the blog that overlaps the text at the bottom so that I can have some options appear, such as 'Like' 'Favorite' 'Feature' or w/e and this is where my problem comes in.
echo "<div class='blogpost' id='" . $row['blogid'] . "'>";
echo "<h3 class='blogheader'>" . $row['blogheader'] . "</h3>";
echo "<p class='blogbody'>" . $row['blogbody'] . "</p>";
echo "<div class='blogextras'></div>";
echo "</div>";
I create the 'blogextras' div that will hold the options mentioned above.
.blogextras {
position:relative;
height:35px;
width:100%;
background:#333;
}
I give it some style.
$(".blogpost").hover(function(){
$(".blogpost").css("overflow", "auto");
$(".blogextras").show();
$(".blogextras").css("position", "absolute");
});
$(".blogpost").mouseleave(function(){
$(".blogpost").css("overflow", "hidden");
$(".blogextras").hide();
$(".blogextras").css("position", "relative");
});
Add some jQuery.
But my final result makes the 'blogextras' div appear below where I want it to be (about 35 pixels) -
http://prntscr.com/1vjppq
I also tried not changing it's position from relative to absolute and this does give a kind of desired result except it makes the boxes re-size which I don't want it to do.
I want the 'blogextras' div to appear at the bottom of the visible text area every time no matter the size of the 'blogpost' div.
Sorry if I haven't been discriptive enough or haven't given enough code just post a comment if you want to see more.
Your .blogpost container needs a relative position so that you can position your .blogextras bar exactly within that container. You also need to give the .blogextras bar a higher z-index so that it overlaps the .blogpost content:
.blogpost {
position:relative;
overflow:hidden;
/* Other CSS */
}
.blogextras {
position:absolute;
z-index:10;
bottom:0;
left:0;
display:none;
height:35px;
width:100%;
background:#333;
}
$(".blogpost").hover(function(){
$(".blogextras").fadeIn();
});
$(".blogpost").mouseleave(function(){
$(".blogextras").fadeOut();
});
Untested, but that should give you ~ what you need.
I'm trying to create an unordered list of <a>text1 text2 text3</a> elements, with a while loop. This list is then styled using #sidebar li a in my CSS.
My problem is that the text1, text2, text3 that is passed into each <a> element in my while loop can take on different lengths and I would like for them to be spaced equally like a table. However, I CANNOT use a table, because to format like a table, requires me to do this....
<li><a><tr><td>text1</td> <td>text2</td> <td>text3</td></tr></a></li>...
and because of that, my CSS "background" image will repeat for EACH <td>, when I only want the background image ONCE for each <tr>...(using different style tags than shown below)
Is there a way to change my while loop to space my text1,text2,text3 evenly like a table (without using a table) and maintain my CSS background image ONCE per each <li>? Any help would be INCREDIBLY appreciated!
My PHP file
while($row = mysql_fetch_assoc($result))
{
echo "<ul id=\"sidebar\">";
echo "<li>" . $row['column1'] . " ". $row['column2']. " ". $row['column 3']."</li></ul>";
}
My CSS file
#sidebar li a {
background: url(../images/sidebar.gif) no-repeat 0px 0px;
}
while($row = mysql_fetch_assoc($result))
{
echo "<ul id=\"sidebar\">;
echo "<li><span class="psuedo-col">" . $row['column1'] . "</span> <span class="psuedo-col">". $row['column2']. "</span> <span class="psuedo-col">". $row['column 3']."</span></li></ul>";
}
Add <span>s around the content from the $row['...'], in order that the css has something to serve as a hook, and set an explicit width on those spans. Bearing in mind that if the content of the spans is too large it will either require an overflow rule (hidden, visible or auto) or your content will start to look odd.
As an example
span.psuedo-col {
display: inline-block;
width: 10em;
overflow: hidden;
}
Or you could use
`display: block;
/* other stuff */
float: left; /* or right, depending on your alignment requirements */
The floats, obviously, will take the contents of the spans out of the flow of the document, perhaps causing the <li> itself to collapse, sine it'll have no content.
Asfar as I understand your question, you want your LI elements to have a fixed width like TD in a table:
#sidebar li {
float:left;
width:33%; /* three columns with equal width */
}