Hello!
We have an issue in print format PDF generation, where a block of text from text-editor field in a custom doctype appears as a full block of text without page breaking inside and the content jumps to the next page.
How may we go about fixing this to prevent it going to the next page and leaving a blank whitespace?
The HTML and CSS for the print format is shared below.
<div class="page-break" style="display: flex; flex-direction: column; flex: 1 1 0%;"> <div id="header-html" class="hidden-pdf"> <div class="letter-head"><img src="/files/20200401_03_Master_20x15mm_LH_Logo_Name_Add_Robo_ArtBo-20x15_2400ppi.png" style="width: 100%;"></div> <div class="print-heading"> <h2>Service Report<br> <small>SR-{{ doc.name[3:(doc.name|length)] or ''}} Dt: {{ doc.get_formatted("sr_date") or ''}}</small> </h2> </div> </div> <div id="footer-html" class="visible-pdf" style=" display: block !important; order: 1;transaction_datemargin-top: auto;"> <div class="row section-break" data-label=""> <div class="col-xs-6 column-break"> <p class="text-left small"> Customer Signature </p> </div> <div class="col-xs-6 column-break"> <p class="text-right small"> Engineer Signature </p> </div> </div> <p class="text-center small page-number visible-pdf"> Page <span class="page"></span> of <span class="topage"></span> </p> </div> <div class="row section-break" data-label=""> <div class="col-xs-6 column-break"> <div class="row data-field" > <div class="col-xs-3 "> <abslabel>Customer</abslabel> </div> <div class="col-xs-9 padnil-r value">M/s.{{doc.customer|truncate(50) or ''}} </div> </div> <div class="row data-field" > <div class="col-xs-3 "> <abslabel>Contact</abslabel> </div> <div class="col-xs-9 padnil-r value">{{doc.contact_person or ''}} </div> </div> <div class="row data-field" > <div class="col-xs-3 "> <abslabel>Model</abslabel> </div> <div class="col-xs-9 padnil-r value">{{doc.machine_name|truncate(90) or ''}} </div> </div> </div> <div class="col-xs-3 column-break"> <div class="row data-field" > <div class="col-xs-5 padnil"> <abslabel>Compl. #</abslabel> </div> <div class="col-xs-7 padnil-r value">{{ doc.name or ''}}</div> </div> <div class="row data-field" > <div class="col-xs-5 padnil"> <abslabel>Order #</abslabel> </div> <div class="col-xs-7 padnil-r value">{{doc.po_no or ''}}</div> </div> <div class="row data-field" > <div class="col-xs-5 padnil"> <abslabel>Machine #</abslabel> </div> <div class="col-xs-7 padnil-r value">{{doc.serial_number or ''}}</div> </div> <div class="row data-field" > <div class="col-xs-5 padnil "> <abslabel>Ser. Type</abslabel> </div> <div class="col-xs-7 padnil-r value">{{doc.service_type or ''}} </div> </div> </div> <div class="col-xs-3 column-break"> <div class="row data-field" > <div class="col-xs-6 padnil "> <abslabel>Compl.dt</abslabel> </div> <div class="col-xs-6 padnil-r value">{{ doc.get_formatted("transaction_date") or ''}}</div> </div> <div class="row data-field" > <div class="col-xs-6 padnil "> <abslabel>Order dt</abslabel> </div> <div class="col-xs-6 padnil-r value">{{ doc.get_formatted("po_date") or ''}}</div> </div> <div class="row data-field" > <div class="col-xs-6 padnil "> <abslabel>OEM</abslabel> </div> <div class="col-xs-6 padnil-r value">{{doc.supplier or ''}}</div> </div> <div class="row data-field" > <div class="col-xs-6 padnil"> <abslabel>Chrg mandays</abslabel> </div> <div class="col-xs-6 padnil-r value">{{ doc.get_formatted("total_man_days") or ''}} </div> </div> </div> </div> <div class="row section-break" data-label=""> <div class="col-xs-12 column-break"> <div data-fieldname="visit_details" data-fieldtype="Table"> <table class="table table-bordered table-condensed "> <thead> <tr> <th style="width: 15%;" class="" > Visit Date</th> <th style="width: 15%;" class="" > Working Hrs</th> <th style="width: 20%;" class="" > Serviced By</th> </tr> </thead> {%- for row in doc.visit_details -%} <tr> <td class="" ><div class="value">{{ row.get_formatted("visit_date", doc) or ''}}</div></td> <td class="" ><div class="value">{{ row.get_formatted("start_hr", doc) or ''}}-{{ row.get_formatted("end_hr", doc) or ''}}</div></td> <td class="" ><div class="value">{{row.serviced_by or ''}} </div></td> {%- endfor -%} </tr> </table> </div> </div> </div> <div class="row section-break"> <div class="col-xs-12"> <div style="" data-fieldname="terms" data-fieldtype="Text Editor"> <div class="boxed"> <abslabel>Reported Issue: </abslabel>{{doc.reported_issue or ''}}</div> </div> </div> </div> <div class="row section-break"> <div class="col-xs-12"> <div class="table boxed height35em"> <abslabel>Service Activities:</abslabel>{{doc.service_activities or ''}}</div> </div> </div> <div class="row section-break"> <div class="col-xs-12"> <div style="" data-fieldname="terms" data-fieldtype="Text Editor"> <div class="boxed height5em"> <abslabel>Spares Used: </abslabel>{{doc.spares_used or ''}}</div> </div> </div> </div> <div class="row section-break"> <div class="col-xs-12"> <div style="" data-fieldname="terms" data-fieldtype="Text Editor"> <div class="boxed height5em"> <abslabel>Recommendations: </abslabel>{{doc.recommendations or ''}}</div> </div> </div> </div> <div class="row lastsection-break"> <div class="col-xs-12"> <div style="" data-fieldname="terms" data-fieldtype="Text Editor"> <div class="boxed height5em"> <abslabel>Customer Feedback: </abslabel>{{doc.customer_feedback or ''}}</div> </div> </div> </div> </div>
/* Exclusive setting for Service Report_below*/ @font-face { font-size: 12px; } abslabel { font-weight: 600; } .print-format { font-size: 12px; } /* Common settings for*/ body { line-height: inherit; } abslabel { margin-bottom: 0; font-stretch: condensed; font-style: italic; } absh5 { margin-top: 8px; margin-bottom: 4px; font-weight: 600; line-height: inherit; } absh4 { margin-top: 0; margin-bottom: 4px; font-weight: 500; line-height: inherit; } absh3 { margin-top: 0; margin-bottom: 0; font-weight: 500; line-height: inherit; } p { margin: 0; overflow-y: hidden; overflow-x: hidden; } .print-heading { border-bottom: 0; margin-bottom: 0; } .page-break { padding: 0; margin: 0; } .section-break { margin-bottom: 10px; } .lastsection-break { margin-bottom: 0; } .height5em { min-height: 5em; } .height35em { min-height: 35em; } .abstermsheading { text-align: center; letter-spacing: 7px; border-color: #D3D3D3; border-bottom-style: solid; border-width: thin; } .boxed { border-radius: 6px; border: thin solid #D3D3D3; text-align: justify; padding: 6px; } .padnil { padding: 0; } .padnil-l { padding: 0 0 0 15px; } .padnil-r { padding: 0 15px 0 0; } /* table settings for terms and tax breakup data_below*/ .reference { width: 100%; border-collapse: separate; border-spacing: 2px; margin: 0; overflow: hidden; } .reference th { border-radius: 6px; border-style: solid; border: thin solid #D3D3D3; font-weight: 500; white-space:nowrap; overflow:hidden; text-overflow:clip; } .reference td { border-radius: 6px; border-style: solid; border: thin solid #D3D3D3; white-space:nowrap; overflow:hidden; text-overflow:clip; page-break-inside: avoid; } .terms { display: table; } .terms td:first-child { width: 20%; } .terms td { text-align: justify; } .table-bordered, .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th { border: 0; } .table { margin: 0; } .table>thead:first-child>tr:first-child>th { border-top: 2px solid #214E92; border-bottom: thin solid #000000; } .table-bordered tbody tr:nth-of-type(even) { background-color: #f3f3f3; } .table-bordered tbody tr:last-of-type { border-bottom: thin solid #EBA607; } .print-format th, .print-format td { background-color: inherit; }