page-break-inside doesn't work with hidden table - html

I some CSS similar to this:
table#id {
display : none;
}
#media print {
table#id {
display : block;
}
.no-page-break {
page-break-inside: avoid !important;
}
}
Each td contains a div.no-page-break. The problem I'm having is that there are page breaks inside the tds unless the table is made visible before opening the print dialogue. If I emulate print media in the dev tools and print, it works fine. If I display the table before window.print() and hide it afterwards it also works, although I'd like to avoid this hack. Anyone have any ideas about why this is happening?

Related

How to avoid page break in table with rowspan on print

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;
}
}

Flex box with page break not working

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.

How do I make a footer visible with CSS for print?

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

Google Chrome (v.51) not applying print media css

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".

two extra blank page add when printing

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