There is one long in the content on the print page, but while we print the some content of the text cut down.
alt text http://img694.imageshack.us/img694/6766/printpage.jpg
please let me know , if there is any dynamic way to add page-break css. the content could be any thing.
You might also just want to prevent page breaks inside an element.
E.g. short tables that you don't want to get ripped apart when printing:
#media print {
table {
page-break-inside: avoid;
}
}
As Haim Evgi referenced in this article http://davidwalsh.name/css-page-breaks
In addition to what's already described in the article, I would like to point out that it's good practice to use .page-break-before: auto instead of .page-break-before: always. The "auto" will break the page only if the contents are at the end if the page, this will prevent breaking the page and leaving a lot of blank space.
The CSS
#media all {
.page-break { display: none; }
}
#media print {
.page-break { display: block; page-break-before: auto; }
}
The HTML
<div>some content</div>
<div class="page-break">more content, this content may be short or long</div>
<div class="page-break">this content may page-break if content above this <div> is at the end of the page</div>
<div class="page-break">etc,..</div>
Use the css page-break-before and page-break-after elements.
Related
This is how my Html page looks in print view.
I need to put it on new page when it breaks in 2 and for that need to insert below div before these elements (something which I am doing for other predefined new pages).
<div style='page-break-before: always'>
But I am not able to do so as these contents are dynamic and I have no idea exactly which HTML element will fall at this place.
If I somehow manage to track HTML element at page break point, I will simply put page-break code just above it. This need to be done on html page with jQuery as print view doesn't support js.
I tried to do it like this but failed here as well. Looks like print view doesn't support position: absolute.
$(document).ready(function(){
$("body").append("<div style='position: absolute;top: 760px;page-break-before: always'>");
});
Try this article
Make Sure You use
#media print {
.page-break { display: block; page-break-before: always; }
}
As page-break-* doesn't work on google chrome, here is the solution which worked for me. I set display: inline-block for all the HTML Element which I don't want to get separated between two pages.
.msgbx,.svnotice, .imgdescbx img {
display: inline-block;
}
I have an HTML page displaying content like below:
<html>
<table></table>
<table></table>
<table></table>
</html>
Now I call window.print(), and want each table printed onto the different pages. How can I make this?
PS: Each table may have different height
Put every table in div, and set style to div like this:
<div style="page-break-after:always;">
This "styling" tells the browser that as soon as that div finishes everything after it should start printing on a new page. We could just as well apply the same rule to, say, all the divs on a page by adding the following to its header:
div {
page-break-after : always;
}
However, it's is more likely that you will want to apply breaks only after certain elements rather than after every paragraph. That's why it is probably better to apply the style individually or to a set of elements that you can use selectively like the DIV.
Read this for more info...
Please give Page break style to your table.
table{
page-break-after : auto ;
}
For more info on page break please go to link.
You can use page-break-after CSS property
<style>
#media print
{
table {page-break-after:always}
}
</style>
Always insert a page break after each element (when printing):
#media print {
table{
page-break-after: always;
}
}
The page-break-after property sets whether a page break should occur AFTER a specified element.
Is there a way to customize the text that is printed on the header and footer of every HTML page that you print, where the page number, URL, date, etc is printed ? (if you choose to print the headers and the footer from the print options).
The other solutions to display a header and a footer on every print page (using thead/tfoot and fixed positioned divs) don't seem to work on Chrome.
Here are the print headers and footers highlighted on a print preview for google.com:
Try this:
#media screen {
.print {
display: none;
}
}
#media print {
.print {
display: block;
}
}
And add the .print class to the appropriate element or elements.
My trouble is I don't know how many pages it has when printing.
I have used the following CSS:
#media print {
.barcode{
position: fixed;
}
}
So that the image appears in each page when printing. but on the second page or third page the image will overlap the content of the page as the screenshot.
You can try something like this:
HTML
<div class='barcode'><!-- Barcode content --></div>
CSS
.barcode { display:none; }
#media print {
.barcode { display: block; position: fixed; top: -20px; height: 50px; }
}
The div needs to be positioned fixed in order to appear on every printed page. You can try adjusting the top property to position and move it above the content.
After reconsidering this, a much better solution would be to generate a PDF version of the page for printing. Then you'll have much more control. There are numerous PDF libraries out there for all server languages.
It's not possible to control this directly. What you can try to do is regularly force page breaks and apply a height to that spacer div. For example:
#media all
{
div.page-break { display:none; }
}
#media print
{
div.page-break { display:block; height: 100px; page-break-before:always; }
}
This will only work, though, if you place enough <div class="page-break"></div>s in your page such that one appears before every natural page break would occur.
Reference: http://davidwalsh.name/css-page-breaks
I don't speak english, sorry. I solved similar issue following instruction on this page : http://thewebthought.blogspot.com/2011/10/html-css-header-and-footer-elements-for.html
I have run into a small problem I have not encountered before: I use javascript (jQuery) to show different sections of information in tabs on a web-page. So what I´m doing, is hiding the tabs that are not being viewed and only showing the tab that is being viewed.
This works very well, but now I am adding a print-specific style-sheet and I want to print the information of all tabs and not just the one being viewed.
How can I undo the javascript hiding of these sections for the print style-sheet?
Edit: Some additional information:
I am using jQuery to hide all div.tabs sections and in my print style-sheet I have set:
.wrapper div.tabs sections {
display: block;
}
assuming that the higher value of .wrapper div.tabs sections compared to div.tabs sections would make the sections visible. But it doesn´t...
The best approach would be to change the JavaScript so that it modified the classes that applied to the elements and didn't modify .style.display. Then you could target elements with those classes differently with the screen and print media stylesheets.
The quick and dirty approach would be to use !important in your print media stylesheet.
All you really need is CSS. Just define some things that show when printed.
Heres and example:
#media print {
div.print_show{ dispay: block; }
span.print_show{ display: inline; }
.print_hide{ display: none; }
}
You can add an extra class to add display:block to your print.css..