V5 Multipages PDF cropping - cut off section

Self-Hosted | v5
#1

Hi, is there any better way to fix multipages pdf autocropping like my problem here?
https://imgur.com/VVLGAZU

Currently i have to add like 2-3 empty lines where the cut-off occurs so that the pdf looks good.

#2

@haris

This look like the business design,

I haven’t been able to recreate an overflow like that. Have you customized the design at all? And does the design break like this consistently for you?

Finally, can you advise which PDF engine is being used? Snappdf, hosted_ninja or Phantom.

#3

Yes, it’s a custom business template and using hosted_ninja pdf engine. I did a few customisation like:

  • add pay now button above client info
  • add custom1 text before product table
  • remove the desc column via js and stacking the Item & Desc content in the same row via js.

I think the layout override via js might causing this. Will try out without them and try to fix this.

#4

@haris

you’ll want to use

page-break-inside:avoid;

inside your table so that it will break cleanly.

#5

@david
tried that, but it moved the whole table to the second page instead.

#6

break-inside:avoid;

  • it fixed the cropping issue
  • but moved the whole table into 2nd page, leaving half of the first page mostly empty.
  • the page break worked fine between 2nd - 3rd page.
#7

You may need to target tr/td/th also as it sounds like it is splitting on the tr

something like

 table tr td, table tr th {
        page-break-inside: avoid;
    }
#8

@david

this fixed it for now, thanks for your help!

#product-table tr {
  break-inside: avoid;
  page-break-inside: avoid;
}