@media print page breaks getting ignored when printing an html form placed in content editor webpart

Question

When I add the following styling to my html page,

@media print {

.pdf-break-after {
    page-break-after: always !important;    
 }

 }

Adding this in a content editor webpart. When I try to print the page using ctrl+p , the page breaks are getting ignored. I am not able to figure out the reason.

Why this strange behavior, any suggestions most welcomed on this?

Answer 1

I figured this issue. The css wasn't getting applied. The problem was with the web-part. The parent div of the webpart had float property applied. I had to set it to none. There on it worked fine.

Answer 2

I have tried Chrome and Firefox with the latest updates, it does not work.

But it works when using IE 11.

You can try the IE to see if it works.

Found multiple threads about page-break-after not working in Chrome issue:

https://stackoverflow.com/questions/1630819/google-chrome-printing-page-breaks https://stackoverflow.com/questions/35871451/page-break-after-does-not-work-in-chrome