How do insert a page break inside a snippet

OL Connect Professional
1

This is my code for a table inside a snippet. This snippet is inside a div container. The issue is if the table has many rows, it becomes red and the content is spread to the next page improperly.

I’ve tried to apply a page break to each row but nothing is working. I’ve also tried to use handlebar functions like #each outside of the snippet on the main html but it does not work as well.

Am i missing something?

<style>
.Table2_Transaction td {
	border:solid 1px black; 
}
</style>
{{#each Table2_TransactionData}}
	<div>
		<br>
		<table class="table" style="font-size:8pt; width:100%; text-align:center;">
		    <tbody>
		    	<tr >
		    	    <td>Policy Type</td>
		    	    <td>:</td>
		    	    <td>{{../PolicyType}} </td>
		    	</tr>
		    	<tr >
		    	    <td>{{TableTypeStructure.BasicIndicator_2000_5}} </td>
		    	</tr>
		    </tbody>
		</table>
		<br>
		<table class="Table2_Transaction table" style="font-size:8pt; width:100%; text-align:center;">
			<thead>
				<tr>
					<td style="width:13%;">Transaction Date</td>
					<td style="width:13%;">Pricing Date</td>
					<td style="width:13%;">Amount (RM)</td>
					<td style="width:22%;">Transaction</td>
					<td style="width:13%;">Unit Price</td>
					<td style="width:13%;">Units</td>
					<td style="width:13%;">Total Units</td>
				</tr>
			</thead>
			{{#each TableStructure}}
			    <tbody>
			    	<tr style="page-break-after: always;" data-breakable="">
			    	    <td>{{TransactionDate_2100_1}}</td>
			    	    <td>{{PricingDate_2100_2}}</td>
			    	    <td>{{Amount_2000_3}} </td>
			    	    <td>{{Transaction_2100_5}} </td>
			    	    <td>{{UnitPrice_2100_6}} </td>
			    	    <td>{{Units_2100_7}}</td>
			    	    <td>{{TotalUnits_2100_8}}</td>
			    	</tr>
			    </tbody>
			{{/each}}
		</table>
	</div>
{{/each}}
2

The pagination algorithm in Connect will not drill into a <div>, each <div> is considered an atomic element. Would it be possible for you to use an <article> or <section> instead of a <div>? Or perhaps remove the <div> and only keep its contents?

3

Hi Sander,

I’ve removed the div entirely and nothing has changed.
However, i noticed that when i put the snippet class inside a section tag, it works.

<section class="transaction-table-container"></section>

However, i discovered that this will not follow the margin limit set in the page setup. It just flows all the way to the end of the page. Is this intentional? Or is there a setting i need to adjust?

<style>
.Table2_Transaction td {
	border:solid 1px black; 
}
</style>
{{#each CombinedTableStructure}}
		<br>
		<table class="table" style="font-size:8pt; width:100%; text-align:center;">
		    <tbody>
		    	<tr >
		    	    <td>Policy Type</td>
		    	    <td>:</td>
		    	    <td>{{../PolicyType}} </td>
		    	</tr>
		    	<tr>
		    	    <td>{{TableTypeStructure.BasicIndicator_2000_5}} </td>
		    	</tr>
		    </tbody>
		</table>
		<table class="Table2_Transaction table" style="font-size:8pt; width:100%; text-align:center;">
			<thead>
				<tr>
					<td style="width:13%;">Transaction Date</td>
					<td style="width:13%;">Pricing Date</td>
					<td style="width:13%;">Amount (RM)</td>
					<td style="width:22%;">Transaction</td>
					<td style="width:13%;">Unit Price</td>
					<td style="width:13%;">Units</td>
					<td style="width:13%;">Total Units</td>
				</tr>
			</thead>
			{{#each TableStructure}}
			    <tbody>
			    	<tr data-breakable="">
			    	    <td>{{TransactionDate_2100_1}}</td>
			    	    <td>{{PricingDate_2100_2}}</td>
			    	    <td>{{Amount_2000_3}} </td>
			    	    <td>{{Transaction_2100_5}} </td>
			    	    <td>{{UnitPrice_2100_6}} </td>
			    	    <td>{{Units_2100_7}}</td>
			    	    <td>{{TotalUnits_2100_8}}</td>
			    	</tr>
			    </tbody>
			{{/each}}
		</table>
{{/each}}
4

Screenshot%202024-06-11%20002920
Screenshot%202024-06-11%20002920532×670 7.09 KB

This is what i mean.

5

The inner #each needs to be around the <tr> instead of around the <tbody>.

I’m not sure what we are doing differently. Here is a test template (saved with 2023.2) based on the html you provided (with the #each moved, and without the page-break-after: always style on the <tr>). There is no <div> or <section>. After switching to preview mode the table is rendered with dummy data and it is split across pages.

Test.OL-template (8.2 KB)

Content overflowing the page margins can be caused by overflow. Page breaks are added based on element heights, but content can ignore element bounds and flow out, potentially across the margins. This is why it is usually a good idea to add the style overflow:hidden to containers.

But looking at the screenshot you posted, perhaps something else is going on.

6

Hi Sander,

Changing the position of the #each to be around made the rows be aware of the bottom margin.

Thank you for your help.

7

Just an additional thing, is it possible to have the headers appear on the next page when a table is broken into multiple pages?

8

The <thead> of the second table (with “Transaction Date”, “Pricing Date”, etc.) is already repeated on each page.

Having the first table (with “Policy Type”) repeated on each page as well would be more complicated. You could move that table to the <thead> of the second table, or you can try to script it with a post-pagination script. I would not recommend the latter, that would add a lot of complexity.

Initial POC (you will still need to fiddle with styles to make it look the way you want):

<style>
.Table2_Transaction td {
	border: solid 1px black; 
}
.table {
	font-size: 8pt;
	width: 100%;
	text-align: center;
}
</style>

{{#each Table2_TransactionData}}
	<br>
	<table class="Table2_Transaction table"">
		<thead>
			<tr><td colspan=7 style="padding: 0; border: none">
				<table class="table" style="border-collapse: collapse">
				    <tbody>
				    	<tr>
				    	    <td>Policy Type</td>
				    	    <td>:</td>
				    	    <td>{{../PolicyType}} </td>
				    	</tr>
				    	<tr>
				    	    <td>{{TableTypeStructure.BasicIndicator_2000_5}} </td>
				    	</tr>
				    </tbody>
				</table>
				<br>
			</td></tr>
			<tr>
				<td style="width:13%;">Transaction Date</td>
				<td style="width:13%;">Pricing Date</td>
				<td style="width:13%;">Amount (RM)</td>
				<td style="width:22%;">Transaction</td>
				<td style="width:13%;">Unit Price</td>
				<td style="width:13%;">Units</td>
				<td style="width:13%;">Total Units</td>
			</tr>
		</thead>
	    <tbody>
			{{#each TableStructure}}
		    	<tr data-breakable="">
		    	    <td>{{TransactionDate_2100_1}}</td>
		    	    <td>{{PricingDate_2100_2}}</td>
		    	    <td>{{Amount_2000_3}} </td>
		    	    <td>{{Transaction_2100_5}} </td>
		    	    <td>{{UnitPrice_2100_6}} </td>
		    	    <td>{{Units_2100_7}}</td>
		    	    <td>{{TotalUnits_2100_8}}</td>
		    	</tr>
			{{/each}}
	    </tbody>
	</table>
{{/each}}

image
image834×376 6.91 KB