Blank Page Added Before "Text Editor" Content in Print View When Using Jinja

, , ,
1

I am using Jinja to fetch and display content from a “Text Editor” field in a custom print format in ERPNext/Frappe. However, if the content from the “Text Editor” field is too long to fit on one page, the system adds a blank page before displaying the content, even if the content should fit on the same page initially.

The content of the “Text Editor” field should appear immediately after the previous section, without adding a blank page.

How can I prevent this unnecessary blank page from being added before the “Text Editor” content? Any advice on fixing this issue

2

It’s likely caused by page breaks or extra spaces in the layout. To fix it, check if there’s any CSS code that forces a page break, like page-break-before, and remove it. Also, make sure the content doesn’t have too much margin or padding and that no extra containers are pushing it to a new page. Use CSS to prevent automatic page breaks and ensure everything fits smoothly on the same page.

Share your sample code.

3

HTML:
{%- from “templates/print_formats/standard_macros.html” import add_header, render_field -%}

{{ add_header(0, 1, doc, letter_head, no_letterhead ) }} 
</div>
<!-- Page Footer Section -->
<div class="page-footer">
    {{footer}}
</div>
<!-- Table for the entire print format -->

<table class="">
    <!-- Table Header Section -->
    <thead>
        <tr>
            <td>
                <!-- Placeholder for the fixed-position header -->
                <div class="page-header-space"></div>
            </td>
        </tr>
    </thead>
    
    <!-- Table Body Section -->
    <tbody class="" >
        <div class="watermark">
             <img alt="logo" src="/files/Envision_watermark.svg">
        </div>
        
        <tr class="content">
            <td>
                <!-- Placeholder for the main content of the print format -->
                <!-- Write your print format code here -->
                {% for row in doc.custom_print_offer %}
                {% if row.has_item_table != true %}
                <div style="text-align:start; color:black">
                    <span style="font-weight: 700; font-size: larger;">{{ row.serial_no or '' }} {{" "}} {{ row.heading or '' }}</span>  {{ row.template_details or '' }} 
                </div>

{% endif %}


{% endfor %}

    </tbody>
    <!-- Table Footer Section -->
    <tfoot>
        <tr>
            <td>
                <!-- Placeholder for the fixed-position footer -->
                <div class="page-footer-space"></div>
            </td>
        </tr>
    </tfoot>
</table>

CSS :
/* Hide the print heading in the print view */
.print-heading {
display: none;
}

/* Define height for page header and page header space */
.page-header,
.page-header-space {
height: 150px;
}

/* Define height for page footer and page footer space */
.page-footer,
.page-footer-space {
height: 50px;
}

/* Styling for the fixed page footer */
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
margin: auto;
}

/* Apply a page break before an element with class ‘page-break-before’ */
.page-break-before {
page-break-before: always;
}

/* Styling for the fixed page header /
.page-header {
position: fixed;
top: 0mm;
display: block;
width: 100%;
border-bottom: 0 !important;
/ Remove bottom border /
color: #ffffff;
/ Text color */
margin-left: 0px !important;
padding-left: 0 !important;
}

/* Adjust padding for print format preview in a specific context */
.print-format .print-format-preview {
padding-left: 0px !important;
}

/* Define page size and margins for printing /
@page {
size: A4 portrait;
/ Set page size to A4 in portrait orientation /
margin: 10mm;
/ Set margin to 10mm /
margin-bottom: 55px;
/ Set bottom margin to 55px */
}
.ql-editor table{
background:#111;
}

/* Media query for print styles */
@media print {
.ql-editor table{
background:#111;
}
thead {
display: table-header-group;
}

/* Display table header in print view */
tfoot {
    display: table-footer-group;
}

/* Display table footer in print view */

/* Adjust height for page header and page header space in print view */
.page-header,
.page-header-space {
    height: 80px;
    border-bottom: 0 !important;
    /* Remove bottom border */
}

/* Adjust height for page footer and page footer space in print view */
.page-header,
.page-footer-space {
    height: 30px;
}

/* Apply page break before specific elements in print view */
.page-break-before {
    page-break-before: none;
}

/* Display page header in print view */
.page-header {
    display: block;
}

/* Adjust padding for print format preview in print view */
.print-format .print-format-preview {
    padding-left: 0px !important;
    padding-top: 0px !important;
}

/* Hide buttons in print view */
button {
    display: none;
}

/* Set body margin to 0 in print view */
body {
    margin: 0;
}

}

4

There’s a lot of code, which makes it hard to check but after checking the code, as per my understanding, first check if any extra margins or padding are pushing content to the next page and remove them. Make sure there are no CSS rules that force a page break before your content. Simplify your HTML structure to avoid layout issues, and adjust your CSS settings to make sure the header and footer spaces are set to 0.