We have been working on a new calendar interface which includes a printable "classic" calendar view. There was much working going into the #media print stylesheet, and while everything is looking great in Safari, the event times are overlapping the event name in Chrome. Cannot figure out why.
#media print {
body{
-webkit-print-color-adjust:exact;
}
img,
.calendar-nav button,
.calendar-date-picker,
.event .btn-group {
display: none;
}
.calendar-nav {
text-align: center;
padding-top:20px;
}
.calendar-nav .date-title {
font-size: 50px;
font-weight: normal;
}
a:link:after,
a:visited:after {
content: "";
}
#calendarTable div.event {
padding: 0;
margin-left:0;
text-indent: 0;
}
.events.active {
width: 100%
}
}
EDIT: I fixed the overlap issue by adding .event-location {float: none; margin-top: 0px;} into the print media query.
Also, in Firefox there is a huge margin to the left of the content:
It is pretty hard debugging these print style sheet to figure out what is going on. Even Chrome developer tools will show the correct print preview, but doing a real print shows it incorrect.
Any ideas on what to do to fix these issues? Is using an #media print inside of our main style sheet an issue?
http://www.puc.edu/calendar?state=full
Looks like adding a few styles to overwrite the Bootstrap defaults was all I needed:
.event-location {
float: none !important;
margin-top: 0px !important;
}
.event-time {
float: none !important;
}
body .container {
width:100% !important;
margin:0 !important;
}
Related
I want to add a margin (a break <br>) between the title and the price tag on mobile. the website is http://www.jokerleb.com. I tried
.h3{
margin:5px;
}
// and
.tags{
margin:5px;
}
and I also tried working on other divs and media queries, nothing worked, it seems that just applying a margin won't change anything. I've been working on this super silly problem for 2 days and don't know why it's not working.
Just add media query like following to get the issue fix.
#media (max-width:400px) {
.tags {
margin-bottom: 8px; /* Added */
padding: 0;
float: right;
right: 24px;
bottom: -12px;
}
}
You are doing it in a wrong way! It's crazily floated and stuff. You might need to do this and it would work:
#media screen and (max-width: 400px) {
.post-block .post-right h3 {
max-width: 100%;
float: none;
padding-top: 40px;
}
}
Preview
I've created a html page with a header,some content and a footer. I tried to get a print of the HTML page, and there was 2 pages. I got the header in first page and the footer in the last page.
What i really need is the header and footer to show in all the pages like in a word document.
I checked and found that using the table format with the thead and tfoot,it can be done.
It worked in firefox and IE, but it's not working in chrome. Is this some webkit browser compatibility problem??
Is there any other way which is compatible with all browsers.
Update: As of April 2021, the bug is still open https://bugs.webkit.org/show_bug.cgi?id=17205. as mentioned below by SHAKU here https://stackoverflow.com/a/34884220/2776433
You can target print styles specifically with the "#print" css media style definition. This will allow you to create individual styles strictly for when the document is being printed, and in print preview.
I would start with this as a solid base.
#media print {
* {
color: #000 !important;
-webkit-text-shadow: none !important;
text-shadow: none !important;
font-family: "Times New Roman", Times, serif;
background: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: none!important;
font-weight: normal!Important;
}
header, nav, footer {
overflow:visible;
}
.body {
width: auto;
border: 0;
margin: 0 5%;
padding: 0;
float: none !important;
}
a, a:link, a:visited {
&[href]:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
&[href^="javascript:"],
&[href^="#"] {
&:after {
content: "";
}
}
}
abbr[title]:after {
content: " (" attr(title) ")";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
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;
}
}
Use fixed positioned elements that you activate with print media type:
#header, #footer {
display: none;
}
#media print
{
#header, #footer {
position: fixed;
display: block;
top: 0;
}
#footer {
bottom: 0;
}
}
(Here assuming you have div elements with id header and footer).
I had the same problem and found simple tags to work best for me.
<table>
<thead>
<tr><td>
content that should be printed as page header
</td></tr>
</thead>
<tbody>
<tr><td>
content that will be spread over all pages consecutively
</td></tr>
</tbody>
</table>
The table will look like a simple table in the browser, but in printouts the content of the <thead> tag is repeated on each page. No CSS required.
Tested in Firefox 32, IE 11 and even in MS Word 2010. Word does not translate the tag into "real" page headers, but repeats the content on top of each page. (You may have to switch to "Page View" to actually see the difference in Word).
none of the above answers are not really the answer for the question asked. From my experience there is no single clean solution right now available. Feel like chrome is purposefully avoiding this bug. https://bugs.webkit.org/show_bug.cgi?id=17205.
when i give the page to print...
the text on the right hand side of the page gets cut off....
i gave text align left in print css but still not working...
providing my code below....
http://jsfiddle.net/jjnKP/
#media print {
body {
margin:0;
padding:0;
line-height: 1.4em;
word-spacing:1px;
letter-spacing:0.2px;
font: 17px Arial, Helvetica,"Lucida Grande", serif;
color: #000;
}
.mainDiv, .navbar,
.copyright {
display: none;
}
#templateTwoPadding {
padding: 0 0;
}
#tableHeadingLastDF {
text-align: left;
width: 134px;
border:1px solid white;
}
#makeLeftDF {
text-align: left;
}
.jumbotron .lead {
font-size: 12px;
}
}
I had the same thing happen to me on a project...everything kept getting cut off on the right side. :(
I ended up "fixing" it by simply setting a width and being happy with it. I don't think this post is the exact one I got my information from but looks good just the same.
I had same problem with SVG graphs, below css is worked for me.
#media print {
body {transform: scale(.6);}
}
Footer css after form's css is not working , what is the problem in this css code?
/*------------------------------------*\
FORMS */
fieldset { padding: 10px; border: 1px solid #ccc; margin-bottom: 1.5em; }
label { display: block; cursor: pointer; }
label:after { content:\": "; }
label::after { content:\": "; }
input,textarea { font-family: inherit; font-size: 1em; line-height: 1.5; }
[placeholder] { cursor: pointer; }
[placeholder]:active,[placeholder]:focus { cursor: text; }
fieldset > :last-child { margin: 0; }
footer {background:red; height:200px; width:200px}
jSfiddle http://jsfiddle.net/Aw239/
in jsfiddle example footer should be red background.
At least firefox Doesnt seem to understand this label:after { content:\": "; } i have no idea whats going on here but all i know is that it is the culprit. I've never actually used content properly.
But, remove those lines and everything runs smoothly.. ( OR reformat those two lines as Kyle showed and it should do it. )
Seems like it doesnt like to have closing semicolons in the same row with everything else
http://jsfiddle.net/Aw239/3/
Or.. get rid of the \'s ?
I formatted your CSS a bit and it seems to work in my FF5. http://jsfiddle.net/Aw239/2/
It is red. Are you using IE8? Because you'll need to use the HTML5 shim if you want to style HTML5 elements.
Does this work for you?
I have an invoice that contains over 100 lines of product that I am trying to print. This single invoice should take over 3 pages, but when printed, the content flows off the footer and the next page is the following invoice.
I am using divs instead of tables, and I can't understand why the long invoices will not print on multiple pages.
Any ideas?
Here's my stylesheet:
h1,h2,h3 { margin: 0 0 0.5em 0; padding: 0;}
body { font-family: sans-serif; font-size: 0.8em; }
label, legend { font-weight: bold; }
pre { font-family: sans-serif; }
shipping_address {
width: 45%;
}
billing_address {
width: 45%;
}
order_info {
padding: 0 10px;
}
shipping_logo {
width: 115px;
}
content {
margin: 0px auto 0px auto;
width: 100%;
padding-bottom:15px;
}
div.container {
display: table;
width: 100%;
}
div.header {
display: table-row;
text-align: center;
}
div.row {
display: table-row;
}
.even {
background: #CCCCCC none repeat scroll 0 0;
}
div.cell {
display: table-cell;
padding: 0 10px;
}
You might want to specify specific stylesheets for printing. For example,
#media all
{
.page-break { display:none; }
}
#media print
{
.page-break { display:block; page-break-before:always; }
}
You can then apply the page-break class where you want to page to break. This article has a few neat tricks to format a page for printing.
We're going to need much more information than what you have suggested to really tackle this problem.
However, a pretty blind stab at something that would cause a similar behavior is if you had something set such that the height is 100%, whether it's a table, a div, or something. This is sometimes done to try and keep a footer at the bottom of the browser window and if you do that, this can cause this behavior when printing.