i have table , 2 popup windows i'm looking print out when action called. issue i'm having page-break in css isn't working , no other solution have tried work either. @ moment 2 pop windows display on top of table data , i'm looking have them either on new pages or 1 after other.
html
<div class="printable"> <table class="table"> <th>option 1</th> <th>option 2</th> <tr> <td><input class="span6 text-center" type="text" id="cost1"></td> <td><input class="span6 text-center" type="text" id="cost2"></td> </tr> </table> <div class="popup" data-popup="popup1"> <p>need print well</p> </div> <div class="popup" data-popup="popup2"> <p>need print well</p> </div> <input type="button" value="print" class="btn btn-success" onclick="window.print();" /> </div> css
.popup { width:100%; height:100%; display:none; position:fixed; top:0px; left:0px; background:rgba(0,0,0,0.75); } @media print { body * { visibility: hidden; } .printable * { visibility: visible; } .popup { display: block; } }
according w3c(see fixed part): https://www.w3.org/tr/css21/visuren.html#propdef-position
uas must not paginate content of fixed boxes.
so position: fixed can't paginate if set top: 100% second .popup.
and in sample second .popup overlay first one.
by changing .popup's position absolute , give second 1 style:
.popup:nth-of-type(2) { page-break-before: always; top: 100%; } 