PDF Page break in the middle of a repeating panel row

Anvil Q&A
#1

Continuing on from this thread, how do you prevent the PDF Renderer from applying a page break in the middle of a row of a repeating panel?

I have tried this solution from this thread but had no luck.

Clone of minimal app showing the page break being inserted in to the middle of the row:
https://anvil.works/build#clone:YZ67V5655QXHEFAY=QIURA3E6VPIW67SU6MWJV2XS

Note: I am using a Standard page template with a role “alert-form” to eliminate the scrolling issue.

Any help would be appreciated.

#2

Did you try this one?

A version of that post was also added as a component to anvil-extras

2 Likes
#3

That was literally the world’s fastest reply!

Yes I did manage to create the component and insert it into the row template but it gave a page break after each row. Ill try fiddle with it again now.

1 Like
#4

I managed to get it to work with this code in the custom component added to the row template:

<div class="break-container" style="overflow: hidden;">
  <div style="page-break-inside:avoid;"/>
  <div style="margin-top: -55px;"/>
</div>

<style>
  .break-container {
    border: 1px solid grey;
  }
  @media print {
  .column-panel .has-components {page-break-inside: avoid;}
}
  
</style>

It doesn’t page break in the row but it has added a lot of padding to the rows (?). Its like they are double line spaced. Any ideas?

image
image765×283 2.29 KB

EDIT: Scratch that - it seems I am way over tired and there is no padding added… :grimacing:

Thanks @stucork awesome solution!
Clone link of solved minimal example above with Page Break component.

https://anvil.works/build#clone:NWSLSIK4HJXIOXMV=YUTREKOVLWH4WFZIJGBELMTU

3 Likes