Page Break in Wkhtmltopdf

Question

I'm using WKHTMTOPDF Tool to convert the web pages in to the PDF and it works great except some page break issues.

Like i have put the style

page-break-before: always;

for Table and it works great. while for avoiding the page breaks I have used :

page-break-inside: avoid 

It works for some divs only.

Please check this snap for the issue.

Update:

Here is the HTML code for the ROUND Shape which is not avoiding the page break.

<div style="float: left; position: absolute;
            top: -14px; right: -20px;
            border-radius: 50%; 
            border: 2px solid #fff; 
            background: #6a98f5; 
            font-size: 9px; 
            font-weight: bold; color: #fff;
            width: 34px; height: 34px;
            z-index: 99999; line-height: 30px;
            text-align: center;
            -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
            box-sizing: border-box;">
                                            78%

Answer 1

It might be a little too late to answer this, but it might help somebody with the same issue.

It seems that page-break is not happening when parent divs floats in some versions of htmltopdf. There's a little more info and a use case in:

https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1604

Answer 2

use this classes for page break :

<style type="text/css" media="screen,print">
       /* Page Breaks */

/***Always insert a page break before the element***/
       .pb_before {
           page-break-before: always !important;
       }

/***Always insert a page break after the element***/
       .pb_after {
           page-break-after: always !important;
       }

/***Avoid page break before the element (if possible)***/
       .pb_before_avoid {
           page-break-before: avoid !important;
       }

/***Avoid page break after the element (if possible)***/
       .pb_after_avoid {
           page-break-after: avoid !important;
       }

/* Avoid page break inside the element (if possible) */
       .pbi_avoid {
           page-break-inside: avoid !important;
       }

   </style>

How to write html code see example.

<div class="page1 pb_after">
   content 1...
</div>
<div class="page2 pb_before pb_after">
   content 2.... <table>...</table> 
</div>

Table rows break... It works :)