How expert like you would you code an odd & even's tr background to be visible for print.
I tried without success to !important them in #media print
#media print {
table > tr:nth-child(odd) {
background: lightgrey!important;
}
table > tr:nth-child(even) {
background: white!important;
}
}
Best
Thanks
What works to allow the rest of the code to work was this :
#media print { body { -webkit-print-color-adjust: exact; } }
Related
I need to apply some styles to a div for printing. I can use a media query #media print {} to accomplish this easily. But I also sometimes need to apply the same styles on the browser itself, before the print dialog is opened. I'm trying to do this by adding a div .print-view to the page. But can't find a way to do it without code duplication.
I've tried this, but it's invalid css:
.print-view, #media print {
.grey-background {
background-color: white;
}
}
I've also tried this (scss), but it causes an error #extend may only be used within style rules.
.print-view {
.grey-background {
background-color: white;
}
}
#media print {
#extend .print-view;
}
Is there some other way for me to accomplish this?
Edit: changed sample code to more accurately reflect what I'm trying to do
Found the answer here. #include can be used to add a mixin into both a media query and a normal selector.
#mixin print {
.grey-background {
background-color: white;
}
}
.print-view {
#include print;
}
#media print {
#include print;
}
This compiles to the following css:
.print-view .grey-background {
background-color: white;
}
#media print {
.grey-background {
background-color: white;
}
}
I made a bootstrap table where I get information to fill up from a stored procedure with some indication where some text are in color or even background.
The trouble is when I want to print, there isn't any color. I can make a file print.css where I'll tell the background color for header and title, but how about the table when i don't even know what will be inside depending of the stored procedure? And more, the table isn't separated well between each pages where it cut my table or words.
This is what I've done until now from my page print.css where I use already td or th for the table :
.table tr {
page-break-after: always;
}
#media print {
#page {
size: letter;
margin: 1cm;
}
}
body{
-webkit-print-color-adjust:exact;
}
.panel-heading {
background-color: #54A0EB !important;
}
.panel-title {
color: #FFFFFF !important;
font-weight: bold !important;
}
#media print {
.table td,
.table th {
background-color: inherit !important;
}
.table-stripe {
background-color: #dedede !important;
}
}
Thank you for your help, really appreciate it!
My css bootstrap was double that's why i can't see color. Everything is fine now.
I created an ionic project and in the style.css file I want to use this syntax. The color stays light-gray even when I change the width to 1 or 0px.
#media screen and (min-width 480px) {
#color {
background-color: red;
}
}
#color {
background-color: lightgray;
}
Try this:
#media screen and (min-width 480px) {
#color {
background-color: red !important;
}
}
#color {
background-color: lightgray;
}
You have a syntax error (i.e. missing a colon between min-width and 480px). Try this simplified version instead:
#media (min-width: 480px) {
#color {
background-color: red;
}
}
I am sorry for my syntax errors. I was typing too fast and didn't review it. You all were correct on my errors, but I found the solution to my problem though. In stead of putting the "#media" syntax in a css file, I simple put it in an html file using the "style" element.
View Image
Well try using ..
"lightgrey" ? There are two kinds of how you can write "grey". Have you tried to write lightgrey instead of lightgray?
It works for me.
I have a problem with the bootstrap CSS/print.
In bootstrap CSS (reset.css) everything is cleared for printing
#media print {
* {
text-shadow: none !important;
color: black !important;
background: transparent !important;
box-shadow: none !important;
}
}
But I have to print several lines in color. My table looks like this:
<div class="container">
<div id="task-summary">
<div id="process-summary">
<table class="table table-condensed">
<tbody>
<tr class="success">
<td>
I embeded this into my code, but it does not work:
#media print {
#task-summary{
.success{
background-color: #DFF0D7 !important;
}
}
}
I've already tried if the css is excepted by using display: none .. it works (line is not displayed) and seems to be on the right place.
Does someone have an idea how I can manage to override the bootstrap css command, without editing the reset.css of bootstrap?
I had the same problem. When you print the page the background-color: ...; option doesn't work at table rows. Change the CSS-Selector to:
#media print {
#task-summary .success td {
background-color: #DFF0D7 !important;
/* add this line for better support in chrome */
-webkit-print-color-adjust:exact;
}
}
Everything should work after this changes.
#media print {
.success {
background-color: #DFF0D7 !important;
}
}
Or
#media print {
#task-summary .success {
background-color: #DFF0D7 !important;
}
}
Or
#media print {
#task-summary > #process-summary .success {
background-color: #DFF0D7;
}
}
I have this form, which i print in order to do my work.
Now, the issue is, in the portrait mode, it gets minimized, i mean it looks small, like half of the page of an A4 Letter, while in landscape mode it looks just fine.
Here is my media print css:
#media print {
textarea{
border:none;
}
textarea#difekti {
padding-bottom:40px;
border:none;
}
#menu-home { display:none }
#status-print { display:none }
#submit-f {display:none};
#MainContent {
display: block;
}
#tab1 table, td, th {
border: 1px solid red;
}
#tab1 thead {
float: left;
}
#tab1 thead th {
display: block;
background: yellow;
}
#tab1 tbody {
float: right;
}
#programi {
display:none;
}
#kursor {
display:none;
}
#adresa { }
* {position:static !important;}
}
Any suggestion?
Besides, i have issues with IE too.
Can i create an additional media print for IE?
Thanks
You should change this to a separate CSS file and link it to your HTML document using media="print" at the bottom most of any CSS link.
<link rel="stylesheet" type="text/css" media="print" href="path/to/your/css" />
This will also help you avoid the issue with IE.
The #page CSS at-rule is used to modify some CSS properties when printing a document. You can't change all CSS properties with #page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.
#page { size:5.5in 10in; margin: 1cm }
#media print and (orientation: portrait) { styles here }
#media print and (orientation: landscape) { styles here }