I 've been stuck on getting print styles to work fine on both browsers with no luck so far. Page-breaks seem to work fine in IE but Chrome is not accepting it. I am using this code within my html to break up the sections:
<div style="page-break-after: always;"> </div>
And..in my print styles I am targeting this div id. Both browsers can print the jumbotron with no issue, but its just that Chrome is not taking in the page break.
#jumbotron {
background-color: white !important;
height: auto !important;
width: 100% !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
margin: 0px !important;
padding: 0px !important;
font-size: 14px !important;
line-height: normal !important;
box-sizing: content-box !important;
display: block !important;
}
#jumbotron{
visibility:visible !important;
}
A couple things I also tried were:
- remove the absolute position on the jumbotron(which fixes the issue on Chrome) BUT generates a blank PDF on IE.
- Tried to apply page-break-after: always !important: but this made no difference
Any help would be greatly appreciated and thanks in advance!