I am trying to print a div on a single page. The div contains a dynamic table which can have more columns depending on what's selected. The number or rows is static.
Printing a page with lots of columns works fine but if only a few it creates a second page.
If I remove:
left: 0;
It will print on a single page for a page with a few columns but if there are then lots of them it cuts the bottom few rows.
How can I get this to show on a single page no matter the content on the page.
When printing I currently have:
#media print {
body * {
visibility: hidden;
}
#section-to-print,
#section-to-print * {
visibility: visible;
}
#section-to-print {
position:absolute;
top: -15px;
left: 0;
font-size:smaller;
}
}
Always insert a page break after each element (when printing):
#media print {
element {page-break-after: always;}
}
The page-break-after property sets whether a page break should occur AFTER a specified element.
Related
I have a number of issues with printing an html page. I spent some time and tried different solutions but none works.
http://jsfiddle.net/kasheftin/vj7hr1cg/1/ - here's the table that I want to print. I simplified it as much as possible. It does not fit in one page and the goal is to avoid page break inside the row content.
Also I want to have some custom text at the bottom of each printed page like 'page 1 of 10'.
Here's the current result:
As we see, the last cell does not fit in a page, it does not have the bottom border, the page number printed as 1/5 instead of '1 of 5' that's specified in css.
Here's what I tried so far:
Each row with rowspan has -primary class name. Page breaks avoided anywhere but before such rows:
.b-rtable__row, .b-rtable__cell {
page-break-inside: avoid !important;
}
.b-rtable__row {
page-break-before: avoid !important;
page-break-after: avoid !important;
}
.b-rtable__row.-primary {
page-break-before: auto !important;
}
Wrapped each cell content into .b-rtable__container div that occupies all cell and has page-break-inside avoid:
.b-rtable__row {
height: 1px; // Fix for 100% height;
}
.b-rtable__cell {
height: inherit;
}
.b-rtable__container {
width: 100%;
height: 100%;
page-break-inside: avoid !important;
position: relative; // tried with and without that rule;
display: table; // tried with and without that rule;
}
Added these rules to draw custom page 1 of 10 text at the bottom of every page, but it's not shown:
#page {
size: auto;
#bottom-center {
content: "page " counter(page) " of " counter(pages);
}
}
I have a react component (className={"print-table"}) which renders multi page content.
The rendering and scrolling works fine in browsers.
However when I try to print it using right click print in browser, the preview shows only one page, with no scrolling in the preview. My css has following for the component:
#media print {
body * {
visibility: hidden;
}
.print-table, .print-table * {
visibility: visible;
}
.print-table {
position: absolute;
left: 0;
top: 0;
}
}
Any suggestions in fixing this will be greatly helpful
Thanks
I have to print the webpage with customized header in every page,
Below is my CSS code for print media
#media screen {
header.onlyprint, footer.onlyprint,.watermark{
display: none; /* Hide from screen */
}
}
#page {
size:A4;
}
#media print {
#page {
size:auto;
margin-top:2mm;
}
html{
margin-top: 20mm;
}
header.onlyprint {
position: fixed; /* Display only on print page (each) */
top: 0; /* Because it's header */
margin-top: 0;
}
}
And HTML code is:
<header class="onlyprint">
<img src="images/logo.png"/>
</header>
But the problem is only in first page the logo is printing properly and from second page the logo is getting overlapped with body content.the CSS of HTML is not working from second page.
It seems this task cannot be properly implemented with CSS only.
I found a workaround for IE and Firefox using tables here: http://www.jessicaschillinger.us/2017/blog/print-repeating-header-browser/
Quick summary of that link's content: IE and Firefox will repeat the <thead> Element on every printed page, whereas the <tbody> will be printed continuously without repetition.
I have a simple HTML page that I want to convert to pdf (print mode). I got the Header to repeat in every page but I noticed that the header covers the content in the second page. Any one know how to avoid that?
Note: I am using Bootstrap, but I commented it out so I could use my own styles.
SCSS:
#media print{
header{
position: fixed;
top: 0;
border: none;
}
main{
margin-top: 2cm;
}
footer{
position: fixed;
bottom: 0;
}
#page {
size: auto;
//margin: 6.35mm;
}
}
Fiddle for HTML: https://jsfiddle.net/u1oy0ehj/
Thanks!
#media print executes the code only for the print mode. So anything you include inside this is not affected in the normal browser mode. So you can get rid of the position: fixed; in the header only for print mode so it doesn't behave that way even in the print mode.
Fixed positioning takes an element out of the document flow, so no fiddling the element will work.
JSFiddle updated
If you want the position: fixed then all you can do is push the <main> content down only for print mode.
main{ margin-top: 5cm; } //probably more than what you had given '2cm'
Even this can't help you much because in the second page since you have made your header fixed(its out of the document flow), the overflowing contents will think the header doesn't exist and continue as usual giving you an overlapped effect.
<div id="list${MACRO}TopDivRow" class="row">
<style>
#media print{
body *:not(#list${MACRO}TopDivRow):not(#list${MACRO}TopDivRow *){
visibility: hidden;
}
#list${MACRO}TopDivRow {
visibility : visible;
position: absolute;
left: 0;
top: 0;
}
}
</style>
<button onclick="window.print();">
print
</button>
---------------------Explanation--------------------------------
#media print is useful to print a page.
#list${MACRO}TopDivRow - this is the division id which you want to print.
in the entire body of page, first iam hidding the content which is not belongs to my perticular division.so i have written **visibility : hidden** there. In the second code snippet, iam printing required division, so i have placed **visibility : visible there**.
window.print() - useful to print the content of window.
you can use completely JavaScript to print the particular division in your page.here we are using simple swapping logic between original content and particular division.if you want entire page, pass entire page division id.
<script type="text/javascript">
function printContent() {
var printContents = document.getElementById("list${MACRO}TopDiv").innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
list${MACRO}TopDiv - this is your division which you want to print
How do I declare that a DIV should be displayed in top-left corner of every page and not in its relative position.
I have a div like:
<div id=header>Document</div>
and I would like to display it on every page in top left corner using css like:
#page {
size: 8.5in 11in;
margin: 0.25in;
border: thin solid black;
padding: 1em;
#top-left {
content: ???? ;
}
}
Thank you.
I realise that this question is a bit old, but for anyone like me who comes here searching for a way to do this, it is possible using CSS3 running elements: http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#running1
In this example, the header is hidden from view in all media types except print. On printed pages, the header is displayed top center on all pages, except where h1 elements appear.
<style>
div.header { display: none }
#media print {
div.header {
display: block;
position: running(header);
}
#page { #top-center { content: element(header, last-except) }}
</style>
...
<div class="header">Introduction</div>
<h1 class="chapter">An introduction</div>
Doesn't
#header {
position: fixed;
top: 0;
left: 0;
}
work? See Printing Headers. Also, have a look at the W3C specification of position: fixed.
EDIT: if I read the CSS 3 specs concerning Margin Boxes well enough, together with the CSS 2.1 specs about the content property, I don't think you can embed a <div> from your page into the contents of a Margin Box, alas.