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.
Related
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; } }
My site contain a lot of data like 150 records on page, when I press ctrl+p then it will show the first page only, like only the visible part of the page but I want full [ 150] records.
This is what I tried So far:
<style>
##media print
{
html, body {
height:100%;
margin: 0 !important;
padding: 0 !important;
overflow: auto;
}
#header, #menuheader
{
display: none !important;
}
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
#prctrow
{
text-align:center !important;
}
}
</style>
This css remove the scrollbar from print preview but data is still not showing.
A few steps to possibly fix this as it's a bit difficult to see the complete issue with only your CSS.
Make sure your actual CSS is using one "#" symbol for "#media print {"
"display: inline-block" might need to be set to "display: block;"
Anything floated may have to be cleared and set to not float
Things positioned absolute or fixed should be set to static
Add something at the bottom of the page to test if everything is blank or just the table on the second page
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;
}
}
A site-wide style sheet has a directive of the form
#outerdiv tr:nth-child(2n) {
background-color: #cccccc;
}
which I would like to override for the tables contained inside div #innerdiv, which in turn is contained inside div #outerdiv.
The only thing I've found works is:
#innerdiv tr:nth-child(2n) {
background-color: #ffffff;
}
Which seems to me excessively specific, and probably very fragile.
Is there some other way to just rescind the site-wide directive? Alternatively, is there a way to specify a background color for all the table rows within #innerdiv.
FWIW, the following does not work:
#innerdiv tr {
background-color: #ffffff; !important;
}
try this
#innerdiv tr {
background-color: #ffffff !important;
}
Depending on how your tables are nested, you can use the following code should the first table is a direct child of #outerdiv:
table tr {
background-color: #fff
}
#outerdiv > table tr:nth-child(2n) {
background-color: #cccc;
}
My company is using a print.css for printing. Also, we have another style.css that overrides any other .css files including print.css. For some reason, IE8 and IE9 are printing blank pages when the #media print query from html5 boilerplate (which is in the override file) is on. When it's commented out, there are no problems. What is the issue here? We would like to leave in the #media print from boilerplate.
PRINT.CSS
#media print
{
body *
{
visibility:hidden;
}
#basicShell #main,
#basicShell #main *,
.basicShell_container .content,
.basicShell_container .content *,
#mainShell_container .center_columnContent,
#mainShell_container .center_columnContent *
{
visibility:visible;
}
#basicShell #main,
.basicShell_container .content,
#mainShell_container .center_columnContent
{
position:absolute;
left:0;
top:0;
}
}
STYLE.CSS (overrides everything)
#media print {
* { background: transparent !important; color: black !important; text-shadow: none
!important; filter:none !important; -ms-filter: none !important; float: none
!important;} /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /*
Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
#page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
I ran into the same issue with the HTML5 Boilerplate.
In my case, it turned out to be this line:
tr { page-break-inside: avoid; }
that caused the blank pages in IE8/9. The page had a large amount of content in a tag (more than one page's worth), and IE decided to handle it by skipping a page and cutting off the content. Yuck.
To avoid messing with the HTML5 Boilerplate, I added the following to my own stylesheet, and problem solved:
tr { page-break-inside: auto; }
Your issue may be due to a different tag, so check anything that sets the page-break-inside property.
The first rule in print.css makes all subelements of body invisible. The intent appears to be to turn some elements to visible, but apparently this fails, perhaps because the markup (which was not disclosed) does not use id and class attributes in the intended way.
You have to take into account the precedence of the stylesheets being loaded in your site. Currently you have this stated on the print.css stylesheet:
body * {
visibility:hidden;
}
That rule basically hides "everything" inside the document. You mentioned that the styles.css stylesheet is supposed to override everything, but in what order are the stylesheets being loaded in your header? If the print.css sheet is after the style.css sheet then the rules of the first with be taken into place.
There is also the case of the media types included in your link reference, which i don't know which has better precedence; the link media type, or media query.