Hi Frappe Community,
I am creating a custom HTML/Jinja Print Format in ERPNext/Frappe.
I am facing an issue with the PDF output.
There is a large empty space between the main content and the footer on some pages, especially on page 43.
The footer is placed using:
...
The page content is inside:
I am also using:
@page {
size: A4;
margin: 18mm;
}
My main content uses:
.definition {
font-size: 14px !important;
line-height: 1.20 !important;
margin-bottom: 16px;
}
I tried changing the line-height using inline CSS, for example:
but there is almost no visible difference in the PDF.
I would like to understand:
- Why does this large empty space appear between the content and footer?
- Is this caused by #footer-html, @page margin, page-break, wkhtmltopdf, or the print format layout?
- How can I make the content area use more of the available page height while keeping the footer fixed at the bottom?
- Is there a recommended CSS/Jinja approach for this in Frappe?
I am using a custom HTML Print Format and generating a PDF.
I have attached a screenshot showing the issue.
Any help or example code would be appreciated.
Thanks.
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap'); /* ========================= SIGNATURE ========================= */ .signature-text { font-family: 'Cedarville Cursive', cursive; font-size: 20px; border-bottom: 1px solid #000; } /* ========================= PAGE SETUP ========================= */ @page { size: A4; margin: 18mm; } body { font-family: "Times New Roman", serif; font-size: 15px; color: #000; } /* ========================= APPENDIX ========================= */ .appendix { text-align: left; font-size: 22px; font-weight: bold; margin-bottom: 25px; } /* ========================= FIRST PAGE TITLES ========================= */ .subtitle { text-align: center; font-size: 16px; font-weight: bold; text-decoration: underline; margin-bottom: 12px; } .title { text-align: center; font-weight: bold; line-height: 1.2; font-size: 17px; margin-bottom: 35px; } /* ========================= INFORMATION TABLE ========================= */ .info-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .info-table td { vertical-align: top; } .info-table td:first-child { width: 50%; padding-right: 18px; } .info-table td:last-child { width: 50%; padding-left: 18px; } /* ========================= FIELD HEADING ========================= */ .heading { font-family: "Times New Roman", serif; font-size: 14px; font-weight: bold; padding-bottom: 10px; } /* ========================= FIELD TABLE ========================= */ .field { width: 100%; border-collapse: collapse; table-layout: fixed; margin-bottom: 10px; } .field td { vertical-align: top; font-family: "Times New Roman", serif; font-size: 12px; line-height: 1.35; } .field-label { width: 95px; font-weight: bold; white-space: nowrap; } .field-value { word-break: break-word; word-wrap: break-word; } .field-value b { font-weight: bold; } /* ========================= MAIN CONTENT ========================= */ .definition-page { font-family: "Times New Roman", serif; font-size: 14.5px; color: #000; line-height: 1.3; } /* ========================= SECTION TITLE ========================= */ .section-title { font-size: 16px; font-weight: bold; margin: 20px 0 18px; } /* ========================= DEFINITIONS ========================= */ .definition { font-size: 14px !important; line-height: 1.20 !important; margin-bottom: 16px; text-align: justify; } .definition b { font-weight: bold; } /* ========================= SUB ITEMS ========================= */ .sub-item { display: flex; margin-left: 20px; margin-bottom: 14px; text-align: justify; } .item-letter { width: 22px; font-weight: bold; } .item-text { flex: 1; line-height: 1.3; } /* ========================= GENERAL PAGE ========================= */ .page { width: 100%; font-family: "Times New Roman", serif; font-size: 14px; color: #000; line-height: 1.35; } /* ========================= AGREEMENT / SIGNATURE ========================= */ .agreement-title { font-size: 20px; font-weight: bold; margin: 35px 0 30px; } .accept-table { width: 100%; border-collapse: collapse; } .accept-table td { width: 50%; vertical-align: top; font-size: 16px; padding: 6px 5px; } .party-heading { font-weight: bold; line-height: 1.35; } .sign-space { height: 30px; } .line { display: inline-block; width: 230px; border-bottom: 1px solid #000; margin-left: 12px; vertical-align: middle; min-height: 18px; } .sign-text { display: block; margin-left: 58px; margin-top: 3px; font-size: 14px; } .gap { height: 14px; } /* ========================= PAGE BREAK ========================= */ .page-break { page-break-before: always; } /* ========================= APPENDIX / EXHIBIT PAGE ========================= */ .appendix-page { width: 100%; min-height: 950px; position: relative; font-family: "Times New Roman", serif; } .appendix-title { margin-top: 40px; margin-left: 40px; font-size: 28px; font-weight: bold; } .exhibit-section { margin-top: 120px; text-align: center; } .exhibit-title { font-size: 20px; font-weight: bold; margin-bottom: 30px; } .exhibit-subtitle { font-size: 18px; font-weight: bold; line-height: 1.5; text-transform: uppercase; } /* ========================= FOOTER ========================= */ .footer { width: 100%; font-size: 12pt; margin-top: 20px; clear: both; } /* ========================= PAGE 40 ONLY ========================= */ .page-40 { font-size: 14.5px !important; line-height: 1.35 !important; } .page-40 .appendix { margin-bottom: 12px !important; } .page-40 .section-title { margin-top: 10px !important; margin-bottom: 12px !important; } .page-40 .definition { margin-bottom: 9px !important; line-height: 1.30 !important; } .page-40 .definition.no-split { page-break-inside: avoid !important; break-inside: avoid !important; } /* ========================= FOOTER HTML ========================= */ #footer-html { margin-top: 0 !important; padding-top: 4px !important; }| Revised January 2025 |
