Long table causes page break for no reason

[antonbrams]

I didn't set page breaks or something. The table just won't stay on the first page. It happens in chrome, safari is ok

[carstenschwede]

Likely same issue as described in https://github.com/pagedjs/pagedjs/issues/84#issuecomment-1175359381.

[julientaq]

@antonbrams could you share some html/css?  thanks

[antonbrams]

Here is some svelte markup, hopefully it will give you an idea.... i'm building a big project and had to copy paste this stuff from different files...

<script>
	import {afterUpdate, tick} from 'svelte'
	import {Previewer} from 'pagedjs'

	const split_into_pages = async () => {
		const previewer = new Previewer()
		await previewer.preview()
	}

	afterUpdate(async () => {
		await tick()
		await split_into_pages()
	})
</script>

<div class="A4">

        <div class="layout">
	        <div>
		        <div>{person_left.props?.['фирма']}</div>
		        <div class="t00">{person_left.name}</div>
		        <div>{person_left.props?.['адрес']}</div>
	        </div>
	        <div style="justify-self: center;">
		        {#if serial}
			        <div>{serial} {order.serial}</div>
			        <div class="t00">
				        {#if shipped}
					        Lieferung per Post
				        {:else}
					        Überbringung
				        {/if}
			        </div>
		        {/if}
		        {@html status_date_of('Auftrag', 'created')}
		        {@html status_date_of('Geliefert', 'shipped')}
	        </div>
	        <div>
		        <div>{person_right.props?.['фирма']}</div>
		        <div class="t00">{person_right.name}</div>
		        <div>{person_right.props?.['адрес']}</div>
	        </div>
        </div>
        
        
        <table class="line">
	        <tr>
		        <th>#</th>
		        {#if show_pictures}
			        <th>Bild</th>
		        {/if}
		        <th>Artikel</th>
		        <th>Beschreibung</th>
		        <th class="t_right">Mg.</th>
		        {#if show_price}
			        <th class="t_right">Preis</th>
			        <th class="t_right">Summe</th>
		        {/if}
	        </tr>
	        {#each filtered() as product, n}
		        <tr>
			        <td>{n + 1}</td>
			        {#if show_pictures}
				        <td style="padding: 1px;">
					        <Thumbnail picture={product._picture} big />
				        </td>
			        {/if}
			        <td class="t_nowrap">{product.serial}</td>
			        <td>{product.description}</td>
			        <td class="t_right">
				        {AMOUNTtoPACKAGE(calc_amount(product), products.packaging)}
			        </td>
			        {#if show_price}
				        <td class="t_right">{CENTStoEURO(product.price)}</td>
				        <td class="t_right">{CENTStoEURO(calc_row(product))}</td>
			        {/if}
		        </tr>
	        {/each}
        </table>
</div>


        
<style>
	.line tr {
		break-inside: avoid;
	}

	.layout {
		display: grid;
		grid-template-columns: 30% auto 30%;
		white-space: pre-line;
	}
        
        @page {
	        size: A4;
	        margin: 10mm 10mm 20mm;
	        @bottom-center {
		        content: counter(page) '/' counter(pages);
	        }
        }
        
        @media screen {
	        .A4_container {
		        display: grid;
		        justify-content: center;
		        background-color: var(--surface-area);
	        }
	        .A4_container .pagedjs_pages {
		        display: grid;
		        grid-gap: var(--s20);
		        padding: var(--s20) 0;
	        }
	        .A4_container .pagedjs_sheet {
		        background-color: white;
		        box-shadow: 0 10px 100px -60px black;
	        }
        }
        
        .A4 {
	        font-size: 16px;
        }
        
        .A4 > * {
	        margin-bottom: var(--s10);
        }
        .A4 > *:last-child {
	        margin-bottom: 0;
        }
        
        .A4 td,
        .A4 th {
	        border-color: silver;
	        padding: var(--s02);
        }
        
        .A4 .t20 {
	        font-size: 32px;
	        line-height: 1;
	        letter-spacing: -2px;
        }
        .A4 .t10 {
	        font-size: 28px;
	        line-height: 1.2;
	        letter-spacing: -1px;
        }
        .A4 .t00 {
	        font-size: inherit;
	        line-height: inherit;
        }
        .A4 .t01 {
	        line-height: 1.5;
	        font-size: 12px;
        }

</style>

[antonbrams]

is anybody here?

[julientaq]

Hi @antonbrams yes!

we’re just full of work. So trying to keep everyone pleased as much as possible.

i reproduced it in codepen https://codepen.io/julientaq/pen/BarQBBg

We’re looking for solution, this seems like a new issue that happened with the new chromium.

[carstenschwede]

@julientaq Thanks for investigating. Recent Chrome, Chrome Canary, Firefox and Safari are all affected.

[julientaq]

(we only support chrome at the moment, but not by choice). 

So Chrome sets a new LayoutNG which breaks some previous features of paged.js. Table and long element with a flex view are the ones the we spot. But there may be more.

@fchasen i have no idea how we can work around this. If you have an idea, i’ll take it.

[hrehfeld]

Absolutely essential feature for anything that's invoices etc. Work-arounds are an absolute pain, too. :cry:

[julientaq]

@hrehfeld yeah we know! It’s even crazier, chromium and chrome, while sharing the same engine, dont even do the same things with the same html and css. we’re scratching our head here. But i think we may have something .

could you try this? https://unpkg.com/[email protected]/dist/paged.polyfill.js

(it comes with some breaking changes, so please read https://pagedjs.org/posts/paged-break-the-long-overdue-update/)

[hrehfeld]

Awesome, that seems to work again!

1. Not sure if this is expected behavior, but thead is not repeated on each page. Any way to force this?

2. Also, this page-break is slightly weird, one (two in pdf) rows pushed onto the next page. Is this honoring widows etc?

[hrehfeld]

(it seems that table headers are now showing after a break? :partying_face: )

[NigelCunningham]

Hi there.

Please see https://github.com/pagedjs/pagedjs/pull/171, which I've just submitted for consideration. It includes a large rework of the pagination code that should help with this issue. I'd appreciate your feedback.

Regards,

Nigel