I have problem when printing my page which contain table in html. It's break into new page even it's still inside the same row. How do i prevent this?
This is how my print preview looks like.
Try this:
#media print {
tr {
page-break-inside: avoid !important;
}
}
I have my example setup in this codepen.
Im trying to print a dynamic amount of images in a grid in a way that things don't get cut off at the bottom of each page. usings page-break-before seems like the easiest way to do things.
So every 5 cols I insert a break item
<div class="page-break"></div>
and the following css
#media all {
.page-break { display: none; }
}
#media print {
.page-break { display: block; page-break-before: always; }
}
But this seems to have no effect. I can't find anywhere that explicitly states it, but since this attribute does not work with floating elements, I'm assuming it wont work with flexbox either.
How else can I achieve what I'm looking for:
Being able to create a grid 5 columns wide dynamically, from an unknown number of items, that will work with the page-break attribute.
I have a page with some data and content. I want to make a print version that will display the content and footer not to worry much about the header.
Instead of writing another page just for printing, I was reading about CSS's feature for "#media print".
First, what browsers support it? Since this is an internal feature, it's OK if only the latest browsers support it.
I was thinking of tagging a few DOM elements with a "printable" class, and basically apply "display:block". Is that doable?
How do I achieve this?
EDIT: This is what I have so far:
/* Print Style - SuccinctNate */
#media print {
* {display:block;}
.printable, .printable > * {display:block;}
#footer {display:block;}
}
your code seems correct . you can set display:block to the items you want to show on the print and display:none on everything else.
#media print {
* { display:none }
.item_i_want_to_print { display:block;}
}
or you could just hide the ones you don't want to appear on the print
#media print {
.item_i_do_not_want_to_print { display: none;}
}
it is compatible with every browser . so use it with confidence
see more here : media print
I know there's a lot of questions about this, but I tried everything and nothing seems to work. I followed these links:
Splitting HTML page so Printer splits it into separate pages
Chrome: Print preview differs from simulate CSS media print
Print media queries being ignored in Chrome?
Google Chrome Printing Page Breaks
and much more.
I tried pretty much every single suggestion in all of them.
Here's what I've got so far :
html
<link href="path/styles/print.css" rel="stylesheet" media="print">
<div class="page-break">
//some stuff
</div>
css
#media all {
.page-break { display: none; }
}
#media print {
.page-break { display: block; page-break-before: always;}
}
In IE and FF, I can't see preview of the page I'll print, but when I do print, it works just fine. In chrome, I can see preview, but it's never right... next I'm trying to save it as pdf, but it still doesn't apply print css.
*Saving as pdf as nothing to do with trying to make it works... it's just to save paper
Now, before you post an answer, please be aware of the following :
I tried this:
!important; hack
Deleting css page and put css directly in html page
Delete media all
Delete media all and changing display block to none
Tried page-break-inside: avoid;
*{transition:none !important;}
.page-break { ... transition: none !important;}
put it in main style sheet
float: none !important;
position: relative; position: static;
display: block; display: inline;
box-sizing: content-box;
-webkit-region-break-inside: avoid;
I didn't try with other version of Chrome. I tried on v.50, after multiple attempt fail, I updated to v.51. Some said it works on v.38 or something like that... I won't downgrade to that version.
Edit: I forgot to mention that my html code is in a jsp page. So the <div class="page-break"> is in a for-loop. Every loop has to be on individual page.
Edit 2: I created a jsfiddle. I pasted the source code I have and it works perfectly. So I removed the css stylesheet that are links in my page. But even by doing that, it won't work. So if it's override somewhere, it's not there.
The page is a JSP page, does it have anything to do about it? If not I'm clueless, because in the same project, on the page I want to print, I added a button that redirect to a page.html and I created 3 divs with the same class name and it works just fine.
So! I'm here to answer my own question, in case someone just can't make it work just like me.
I tried to give a new approach to my problem, since I can't print single div per page and I don't know why, I must find another way. But it's not that I didn't know how it works... I created a JSFiddle and it worked. In my own project, I created a html page and it worked. But since I was in JSP, maybe it was messing with my code somewhere.. I have no idea.
So here's what I've done.
function getStuffToPrint(data){
var html = "", index, len;
for (index = 0, len = data.length; index < len; ++index) {
html += "<div class=\"custom-page-break\">" + data[index].innerHTML + "</div>";
}
var mywindow = window.open();
mywindow.document.write('<html><head>');
mywindow.document.write('<link href="my/path/to/styles/print.css" rel="stylesheet" type="text/css"/>');
mywindow.document.write('</head><body >');
mywindow.document.write(html);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();
return true;
}
In my case, data was an objectHTMLCollection : document.getElementsByClassName("custom-page-break")
It's a bit ratchet, I had to write the div with the class name again...
Here's my css, it may work without display: block and page-break-inside, I didn't even try.
#media print {
.custom-page-break {
display: block !important;
page-break-before: always !important;
page-break-inside: avoid !important;
}
}
Hope it'll save hours for some people.
Have you tried to put the print.css in your main style css document ? I had a similar case and it solved my problem.
You dont have to make a pdf file every time to see if the #media print worked, you can see the page emulated like print in your Google developpement tool on Chrome:
To see that option, do : F12 -> show console -> rendering ( it's a tab of the console ) -> check "Emulate media Print".
I am using using a CSS property for printing,
two extra page always added in my print. for this I tried these thing:-
.print:last-child {
page-break-after: auto;
}
but this is not working
I am also tried:-
html, body {
height: auto;
}
but problem is still there.
and when I using this:-
.print{
page-break-after: always
}
It prints an extra blank page before
please add page-break-after: avoid or page-break-before: avoid and you can reduce element spacing it also affect. if you give me url/js fiddle link it will be easier to fix issue. i have also hanged many times on print version