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

Question

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.

This might not be the issue, but maybe the classname is causing some conflict? Its a stab in the dark, but easy enough to try. — Arathi Sreekumar, Jun 21 '16 at 14:32
Try adding 'float: none' as well to the css class .page-break; try stuff in this basically: http://stackoverflow.com/questions/4884380/css-page-break-not-working-in-all-browsers — Arathi Sreekumar, Jun 21 '16 at 15:04
@ArathiSreekumar I was crossing my fingers... but no, none of those answers worked. I added the style in the same order, all with !important.. it won't work! — anthomaxcool, Jun 21 '16 at 15:14
-webkit-region-break-inside: avoid; in there might help, but thats the last thing I can think of, other than an issue if one of the parent elements do not have position relative. Note: all parent elements should be block level as well. — Arathi Sreekumar, Jun 21 '16 at 15:29
Yea I already tried -webkit-region-break-inside. I'm afraid the display is set to block to the parent as well — anthomaxcool, Jun 21 '16 at 15:38
I sadly have to bow out my friend, hope someone else knows enough to help. — Arathi Sreekumar, Jun 21 '16 at 15:40
Thanks. I guess it's an issue with me, I just created a jsfiddle and it works just fine... — anthomaxcool, Jun 21 '16 at 15:45
Possibly a hidden css somewhere overriding and causing the issue. — Arathi Sreekumar, Jun 21 '16 at 16:03
@ArathiSreekumar Thanks for your follow up. It just made me think of other solution, without you I'd probably be still searching how to make it work! — anthomaxcool, Jun 21 '16 at 19:17

score 1 · Answer 1 · answered Jun 21 '16 at 19:16

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.

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 21 '16 at 14:03

Relisora

1,049
1
12
29

Thansk for quick answer. Yes I forgot to mention it, at first it was in my main style.css, it didn't work so I moved it in another css file. I also tried the checkbox, but I don't understand where... Is it when I see the page, or when I click on print and see the preview? Because when I check it there's nothing refreshing or anything, it stays the same.. – anthomaxcool Jun 21 '16 at 14:20
Actually I found what it was suppose to do. But I still can't make it work – anthomaxcool Jun 21 '16 at 17:38

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

2 Answers2