Printing a Text Editor using PDF splits across two pages

Frappe Framework Print Formats
1

Hello, I’m trying to print terms and conditions (Data type is Text Editor) using PDF. However, I face a problem where the text is breaking between two pages and appears in the two as halves as shown below in the photo.
Also, you can see scroll bar is shown also on the print page!!

I need to use the format from the Text Editor as numbering, heading for the text but It looks like causes some problems while printing.

        <div class="row section-break">
        <div class="col-xs-12 column-break">
             <div >
                {{ doc.terms }}
            </div>    
             
        </div>
    </div>

oz-468%5B1%5D
oz-468%5B1%5D924×504 45.9 KB

2

Hi

Remove the class “section-break” and “column-break”.
It will format properly in pdf

3

same issue even after I remove them.
The problem is from the Text Editor data type. Normal Text doesn’t have this problem.

4

what version of wkhtmltopdf are you using ?

Which frappe/erpnext are you running ?

5

ERPNext: v13.20.0 (HEAD)
Frappe Framework: v13.20.0 (HEAD)

How can I know the wkhtmltopdf version? but I guess it should the latest one since I didn’t specify.

6

use below css

table,
tr,
td,
div {
page-break-inside: avoid;
}

7

wkhtmltopdf --version

8

still the same problem. I’m using too long text editor that consists of 5 pages and the cutting off occurs only in one or two pages.

9

I have upgraded wkhtmltopdf from 0.12.5 to 0.12.6 but still the same issue.

10

Hi @Mohsin1990

I am using the same code as yours without the class “section-break” and “column-break”. And with doc.terms as Text Editor type

image
image828×469 60.3 KB

the CSS class for the text-editor is .ql-editor

you could may be add a padding to the p tag or change the fonts

11

No use, this might fix in one document for adding more padding but I have different documents and many pages of this text editor.

        <div class="row ">
        <div class="col-xs-12">
            <div style="padding: 15px 0px;" data-fieldname="terms" data-fieldtype="Text Editor">
                {{ doc.terms }}
            </div>
        </div>
    </div>

.ql-editor p{
page-break-inside: avoid !important;
padding-top:2px;
}

p{
page-break-inside: avoid !important;
}

li{
page-break-inside: avoid !important;
}

screenshot_53
screenshot_53676×584 50.4 KB

12 
<div class="ql-snow">

<div class="ql-editor read-mode" data-fieldtype="Text Editor" data-fieldname="terms">

{{doc.terms or ""}}

</div>

</div>