I have been beating my head into the wall trying to get this form to format correctly when printed. The problem I have is that when I try to tell it where to insert page breaks manually, it still does things like breaking in the middle of tables as well as inserting blank pages randomly. I am sure it must be something simple i am missing but after a week of tinkering- I am finally reaching out to the community.
first off- I am only a novice programer and my HTML CSS skills are pretty limited. I have tried adding the following style with almost no effect.
.page-break {
break-after: always;
break-before: always;
margin-top: 40px; /* Optional: to add some space before the new page content starts */
}
/* Table handling */
table {
page-break-inside: auto;
border-collapse: collapse; /* Ensure proper table rendering */
}
tr {
break-inside: avoid; /* Avoid breaking inside rows */
break-after: auto; /* Allow break after rows */
}
/* Handling dividers and spacing */
hr {
margin: 0;
padding: 0;
page-break-after: avoid;
}
.divider {
margin: 0;
padding: 0;
break-after: avoid;
}
/* General page break avoidance for divs */
div {
break-inside: avoid;
break-after: auto;
}
}
And here is the full HTML in it’s current state where I am now trying to use inline style adding divs specifically to attempt a forced page break…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Termite Inspection Report</title>
<style>
/* Centering the entire content of the body */
body {
display: flex;
flex-direction: column;
/* Vertically centers the content */
align-items: center; /* Horizontally centers the content */
min-height: 100vh; /* Ensures the content is centered within the full viewport height */
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
background-color: #f9f9f9;
text-align: center; /* Centers text inside block elements */
}
.logo {
width: 400px;
}
/* Divider styling */
.divider {
width: 100%;
height: 35px;
background-color: #fbd351;
margin: 20px 0;
}
.alert {
color: red;
}
/* Styling images specifically within tables */
table img {
max-width: 275px; /* Adjust this value as needed for larger images */
height: auto;
}
table {
border-collapse: collapse;
margin: 20px 0;
width: 100%;
}
th, td {
padding: 10px;
border: 3px solid #ccc;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<#if logoUrl?has_content>
<div class="logo">
<img src="${logoUrl}">
</div>
</#if>
<h1>Annual Termite Inspection Report</h1>
<#if homephoto.imageUrl?has_content>
<img src="${homephoto.imageUrl}" width="600">
</#if>
<h1> ${serviceFullAddress}</h1>
<h2> ${apptDate}</h2>
<p style="break-after: always;"> </p><!-- MANUAL PAGE BREAK HERE!!!!! -->
<div class="section content"><!-- Customer Info -->
<h2 class = "divider">Customer Information</h2>
<table>
<tr>
<th>Account #</th>
<td>${accountId}</td>
</tr>
<tr>
<th>Name on Account</th>
<td>${customerFullName}</td>
</tr>
<tr>
<th>Service Address</th>
<td>${serviceFullAddress}</td>
</tr>
<tr>
<th>Email Address</th>
<td>${customerEmail}</td>
</tr>
<tr>
<th>Mobile Number</th>
<td>${customerPrimaryPhone}</td>
</tr>
<tr>
<th>Inspector's Name</th>
<td>${techName}</td>
</tr>
</table>
</div>
<div class="section"><!-- Termite Activity Summary -->
<h2 class = "divider">Termite Activity</h2>
<p>${termite.termiteActivity} ${sum.treat?string('A treatment was performed. Please see the attached diagram.','No treatments were performed.')}</p>
<p style="break-after: always;"> </p><!-- MANUAL PAGE BREAK HERE!!!!! -->
<div class="section content">
<#if (ext?has_content || crawl?has_content || int?has_content)>
<h2>Summary of action items.</h2><!-- ALERT SUMMARY-->
<p>The items described below must be corrected by the homeowner.</p>
<table>
<thead>
<tr>
<th>Photo</th>
<th>Location</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<!-- Exterior Photos with Alerts -->
<#if ext?has_content>
<#list ext as item>
<#if item.action?has_content>
<tr>
<td>
<#if item.exphoto.imageUrl?has_content>
<img src="${item.exphoto.imageUrl}" width="150">
<#else>
No photo available.
</#if>
</td>
<td>Exterior</td>
<td>${item.exPhotodes!"No description provided."}</td>
</tr>
</#if>
</#list>
</#if>
<!-- Crawlspace Photos with Alerts -->
<#if crawl?has_content>
<#list crawl as item>
<#if item.action?has_content>
<tr>
<td>
<#if item.crawlphoto.imageUrl?has_content>
<img src="${item.crawlphoto.imageUrl}" width="150">
<#else>
No photo available.
</#if>
</td>
<td>Crawlspace</td>
<td>${item.crawlphotodes!"No description provided."}</td>
</tr>
</#if>
</#list>
</#if>
<!-- Interior Photos with Alerts -->
<#if int?has_content>
<#list int as item>
<#if item.action?has_content>
<tr>
<td>
<#if item.intphoto.imageUrl?has_content>
<img src="${item.intphoto.imageUrl}" width="150">
<#else>
No photo available.
</#if>
</td>
<td>Interior</td>
<td>${item.intphotodes!"No description provided."}</td>
</tr>
</#if>
</#list>
</#if>
</tbody>
</table>
<#else>
<p>No alert photos available.</p>
</#if>
</div>
</div>
<p style="break-after: always;"> </p><!-- MANUAL PAGE BREAK HERE!!!!! -->
<div class="section inspection-question content"><!------------- EXT PERIMETER INSPECTION -->
<h2 class = "divider">Exterior Perimeter Inspection</h2>
<table class= "inspection-question">
<tr>
<th>Are any areas inaccessible or obstructed?</th>
<td>${exterior.inaccessible?string('Yes', 'No')}</td>
<td>Obstructed areas limit visibility and prevent a thorough inspection, increasing the risk of missed issues.</td>
</tr>
<tr>
<th>Wood destroying fungi damage/rot present?</th>
<td>${exterior.fungiRot?string('Yes', 'No')}</td>
<td>Wood rot indicates moisture damage, which can weaken structural integrity and invite termite infestations.</td>
</tr>
<tr>
<th>Is there adequate clearance (6 inches) between the ground and siding?</th>
<td>${exterior.clearance?string('Yes', 'No')}</td>
<td>Adequate clearance prevents soil contact, reducing the risk of termite entry into the structure.</td>
</tr>
<tr>
<th>Is there wood in contact with the ground?</th>
<td>${exterior.woodtoground?string('Yes','No')}</td>
<td>Wood-to-ground contact is a common termite entry point, as termites can easily access and feed on the wood.</td>
</tr>
<tr>
<th>Is there any firewood/stored wood next to or against/touching the structure?</th>
<td>${exterior.firewood?string('Yes','No')}</td>
<td>Storing wood near the home provides termites with a food source close to the structure, increasing infestation risk.</td>
</tr>
<tr>
<th>Are any trees touching the structure?</th>
<td>${exterior.trees?string('Yes', 'No')}</td>
<td>Trees in contact with the home provide a bridge for termites and pests to enter the building.</td>
</tr>
<tr>
<th>Is there proper drainage / water diversion from the home's foundation?</th>
<td>${exterior.drain?string('Yes', 'No')}</td>
<td>Poor drainage can lead to moisture buildup, which attracts termites and encourages wood decay.</td>
</tr>
<tr>
<th>Does the structure have a crawlspace or Walkunder area?</th>
<td>${exterior.foundationcrawl?string('Yes','No')}</td>
<td>Crawlspaces require special attention as they are prone to moisture issues and can harbor termites undetected.</td>
</tr>
</table>
<#if stationsInspected?has_content>
<p style="break-after: always;"> </p><!-- MANUAL PAGE BREAK HERE!!!!! -->
<div>
<img src="https://assets.corteva.com/is/image/Corteva/Sentricon%20logo%20RGB">
<p>The Sentricon system is a trusted termite baiting solution designed to protect homes and properties from termite infestations. It uses bait stations strategically placed around the property to eliminate termite colonies. These stations contain a slow-acting bait that termites ingest and share with the colony, ultimately eliminating it. Sentricon is environmentally friendly and requires no invasive drilling or chemical spraying.</p>
<table width="100%">
<thead>
<tr>
<th>Description</th>
<th>Status</th>
<th>Activity</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
<#list stationsInspected?sort_by("stationId") as station>
<tr>
<td>${station.description!}</td>
<td>${station.indicator!}</td>
<td>${station.activity?string('Yes','No')}</td>
<td>${station.comments!"No comments"}</td>
</tr>
</#list>
</tbody>
</table>
</div>
</div>
</#if>
<p style="break-after: always;"> </p><!-- MANUAL PAGE BREAK HERE!!!!! -->
<#if ext?has_content><!--------------------- Exterior Photos -->
<div class="section content">
<h2>Exterior Photos</h2>
<table>
<thead>
<tr>
<th>Photo</th>
<th>Risk & Description</th>
</tr>
</thead>
<tbody>
<#list ext as item>
<tr>
<td>
<#if item.exphoto.imageUrl?has_content>
<img src="${item.exphoto.imageUrl}">
<#else>
No photo available.
</#if>
</td>
<td>
<h2>${item.risk} Risk</h2>
<#if item.exPhotodes?has_content>
${item.exPhotodes}
<#else>
No description provided.
</#if>
<#if item.action?has_content>
<h3 class="alert">*Home Owner Action Needed*</h3>
</#if>
</td>
</tr>
</#list>
</tbody>
</table>
</div>
</#if>
<p style= break-after: always;> </p><!-- MANUAL PAGE BREAK HERE!!!!! -->
<#if exterior.foundationcrawl><!-- Crawlspace Inspection -->
<div class="inspection-question section content">
<h2 class = "divider">Crawlspace/Walkunder Inspection</h2>
<table>
<tr>
<th>Were there any areas that were not accessible for inspection?</th>
<td>${crawlspace.inaccessible?string('Yes', 'No')}</td>
<td>Inaccessible crawlspaces can conceal termite activity and moisture issues, increasing the risk of future problems.</td>
</tr>
<tr>
<th>The crawlspace contains debris and/or stored materials?</th>
<td>${crawlspace.debris?string('Yes', 'No')}</td>
<td>Debris and stored materials can hide termite activity and retain moisture, promoting infestations.</td>
</tr>
<tr>
<th>Is there a moisture barrier covering the soil?</th>
<td>${crawlspace.moisturebarrior?string('Yes', 'No')}</td>
<td>A moisture barrier prevents excessive ground moisture from entering the crawlspace, reducing termite attraction.</td>
</tr>
<tr>
<th>Is there adequate clearance (min 3 inches) between the liner and subfloor system?</th>
<td>${crawlspace.inspectiongap?string('Yes', 'No')}</td>
<td>Adequate clearance helps ensure that moisture doesn't accumulate against the structure, preventing wood decay.</td>
</tr>
<tr>
<th>Subfloor insulation type?</th>
<td>${crawlspace.insulationtype}</td>
<td></td>
</tr>
<tr>
<th>Is insulation hanging or fallen?</th>
<td>${crawlspace.insulationhang?string('Yes', 'No')}</td>
<td>Hanging or fallen insulation can indicate moisture issues or other structural concerns in the crawlspace.</td>
</tr>
<tr>
<th>Is there standing water and/or faulty grade present? (should be evaluated by a drainage/or gutter expert)</th>
<td>${crawlspace.standingwater?string('Yes', 'No')}</td>
<td>Standing water or faulty grading can contribute to excessive moisture, increasing the risk of termite activity.</td>
</tr>
<tr>
<th>Is there evidence of crawlspace moisture problems, fungi damage/stains, or condensation visible?</th>
<td>${crawlspace.moistureissues?string('Yes', 'No')}</td>
<td>Visible moisture problems, fungi damage, or stains indicate high moisture levels that can lead to wood decay and attract termites.</td>
</tr>
<tr>
<th>Crawlspace Wood Moisture Content</th>
<td>${crawlspace.moisturecontent}%</td>
<td>Monitoring the wood moisture content helps in assessing the potential for decay or termite activity.</td>
</tr>
<tr>
<th>Plumbing leaks?</th>
<td>${crawlspace.plumbingleaks?string('Yes', 'No')}</td>
<td>Plumbing leaks or condensation can create moisture problems, which attract termites and cause structural damage.</td>
</tr>
<tr>
<th>Are there any dirt-filled areas (porches, chimney, etc.)?</th>
<td>${crawlspace.dirt?string('Yes', 'No')}</td>
<td>Dirt-filled areas near the structure can increase moisture levels and provide a conducive environment for termites.</td>
</tr>
<tr>
<th>Is there visible moisture damage or rot in the crawlspace?</th>
<td>${crawlspace.fungiRot?string('Yes', 'No')}</td>
<td>Moisture damage and wood rot indicate water issues, which can attract termites and other pests.</td>
</tr>
<tr>
<th>Are there any plumbing leaks or HVAC condensation drains discharging in the area?</th>
<td>${crawlspace.plumbingleaks?string('Yes', 'No')}</td>
<td>Plumbing leaks or condensation can create moisture problems, which attract termites and cause structural damage.</td>
</tr>
</table>
</div>
</#if>
<p style="page-break-after: always;"> </p><!-- MANUAL PAGE BREAK HERE!!!!! -->
<#if crawl?has_content><!-- Crawlspace Photos -->
<div class="section content">
<h2>Crawlspace Photos</h2>
<table>
<thead>
<tr>
<th>Photo</th>
<th>Risk & Description</th>
</tr>
</thead>
<tbody>
<#list crawl as item>
<tr>
<td>
<#if item.crawlphoto.imageUrl?has_content>
<img src="${item.crawlphoto.imageUrl}">
<#else>
No photo available.
</#if>
</td>
<td>
<h2>${item.risk} Risk</h2>
<#if item.crawlphotodes?has_content>
${item.crawlphotodes}
<#else>
No description provided.
</#if>
<#if item.action?has_content>
<h3 class="alert">*Home Owner Action Needed*</h3>
</#if>
</td>
</tr>
</#list>
</tbody>
</table>
</div>
</#if>
<p style="page-break-after: always;"> </p><!-- MANUAL PAGE BREAK HERE!!!!! -->
<#if interior.inspectint><!-- Interior Inspection -->
<div class="section inspection-question content">
<h2 class = "divider">Interior Inspection</h2>
<table>
<tr>
<th>Was an interior inspection completed?</th>
<td>${interior.inspectint?string('Yes','No')}</td>
<td>An interior inspection ensures that any signs of termite activity, moisture problems, or structural issues are detected inside the home.</td>
</tr>
<tr>
<th>Was an attic inspection completed?</th>
<td>${interior.attic?string('Yes','No')}</td>
<td>Attic inspections are crucial, as termites can sometimes enter through roof structures, and moisture can accumulate in poorly ventilated attics.</td>
</tr>
<tr>
<th>Are there any areas that were not accessible for inspection, stored items, or personal belongings that limited your inspection?</th>
<td>${interior.inaccessint?string('Yes','No')}</td>
<td>Obstructions inside the home, such as stored items, can prevent a thorough inspection, increasing the risk of undetected issues.</td>
</tr>
<tr>
<th>Are there any bath tubs without access doors?</th>
<td>${interior.bath?string('Yes','No')}</td>
<td>Bath trap access doors allow inspectors to monitor and mitigate termite risks in areas that are often prone to moisture and wood exposure, reducing the chances of undetected infestations.</td>
</tr>
<tr>
<th>Are there wood floors present on slab areas?</th>
<td>${interior.woodfloors?string('Yes','No')}</td>
<td>Wood floors on slab areas can be more susceptible to moisture buildup, which can create ideal conditions for termites.</td>
</tr>
<tr>
<th>Is there evidence of interior moisture problems, fungi damage/stains, or condensation visible? (should be evaluated by a licensed contractor)</th>
<td>${interior.intmoist?string('Yes','No')}</td>
<td>Moisture problems, fungi damage, or visible stains inside the home indicate potential leaks or ventilation issues, which can lead to termite infestations.</td>
</tr>
</table>
</div>
<p style="page-break-after: always;"> </p><!-- MANUAL PAGE BREAK HERE!!!!! -->
<#if int?has_content>
<div class="section content"><!-- Interior Photos -->
<h2>Interior Photos</h2>
<table>
<thead>
<tr>
<th>Photo</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<#list int as item>
<tr>
<td>
<#if item.intphoto.imageUrl?has_content> <!-- Adjust this key based on your data structure -->
<img src="${item.intphoto.imageUrl}">
<#else>
No photo available.
</#if>
</td>
<td>
<h2>${item.risk} Risk</h2>
<#if item.intphotodes?has_content>
${item.intphotodes}
<#else>
No description provided.
</#if>
<#if item.action?has_content>
<h3 class="alert">*Home Owner Action Needed*</h3>
</#if>
</td>
</tr>
</#list>
</tbody>
</table>
</div>
</#if>
</#if>
<footer><!---------------------------------- SIGNATURE AREA-->
<section class="no-page-break">
<h2>Signature</h2>
<div class="signature-container">
<div class="signature-box-left">
<div class="border-box signature-box">
<#if signature??><div class="signature">${signature}</div>
<div class="bottom-label">Homeowner / Authorized Representative Signature</div>
<div class="date-label">signed on ${signatureSignDate}</div></#if>
</div>
</div>
<div class="signature-box-right">
<div class="border-box signature-box">
<div class= "signature">${representative!' '}</div>
<div class="bottom-label">Inspector Signature</div>
<div class="date-label">signed on ${representativeSignDate!' '}</div>
</div>
</div>
</div>
</section>
</footer>
</body>
</html>
Any ideas on what i could try to get this to format properly would be great!
0