In Bulk Document, Invoice breaking to the next page

Same issue here, hope someone can help.

Hello @pokhriyal and @furnitureoph

It’s a known issue and will be fixed in a next release as soon as possible.

Could you try this and let us know if it works fine:

add_action( 'wpo_wcpdf_custom_styles', 'wpo_wcpdf_custom_styles' );
function wpo_wcpdf_custom_styles () {
	?>
	table.order-details {
	    margin-bottom: 0mm;
	}
	<?php
}

If you never worked with action/filters please read this documentation page.

• This reply was modified 4 years, 11 months ago by alexmigf.
• This reply was modified 4 years, 11 months ago by alexmigf.

Hey @alexmigf,

I tried the code snippet (pasted in my active theme’s functions.php) you provided and it seems like it does not make changes. The invoice came as it was before adding your code.

Are you sure that this real issue behind this? I’d restate that this happens only with bulk invoice generation (at least I’ve not noticed the issue when generating an invoice for a single order).

Let me know if you need any other input from my end to proceed further on this.

Hello @pokhriyal

It seems to me, looking into your screenshot, that you might have custom styles applied to the document, and in that case you should remove those and see if the snippet i sent really applies.

@alexmigf yes there were some custom styles. After completely removing the custom styles, I was not able to replicate the issue. But, honestly, the fix doesn’t seem to be convincing.

To me, it looks like (and I may be wrong) we are just trying to reduce the probability that the invoice ever gets in two pages, by removing any sort of margin.

After removing the custom styles, my invoice looks like this.

I’ve highlighted the sections (with red arrows) where I’d need margin. As soon as I try to add margin, it breaks in two pages. I use the following code:

  table.customer-details {
    margin-top: 20px;
    margin-bottom: 20px;
  }

Hello @pokhriyal

You are removing the margin in the wrong table, if you check my code it only affects this table .order-details.

Thanks for sharing this. DOMPDF, which is the library that is used by our plugin for converting HTML to PDF is a bit finicky with table margins and page division, unfortunately this is beyond our control. If you want to get to the bottom of this, you could report the bug in the dompdf github: https://github.com/dompdf/dompdf/issues/
The margins themselves are not the issue per se (you can check this by adding more items to the order and you’ll see it divides fine), it’s the situation where it’s almost the size of the page, dompdf tries to fit it (thinking it will) and then appears to apply the margins (no longer fitting). This last bit is speculation from my end though…

An easier solution would be to either use plain <br> or only use top-margin (I believe it’s the bottom margin that is the issue)

Thanks, @pomegranate for your response. Even if I remove the bottom margin, and use top margin it’s causing the issue.

 
table.customer-details {
	margin-top: 20px;
}
table.order-details {
	margin-top: 20px;
}

Let me know if you’ve any other thoughts that can help.

Do you think remove the table and converting to <br> will fix this issue?

certainly worth trying! I wouldn’t remove the table, just the margin.

Nah, even replacing margins with brs does not work.

• This reply was modified 4 years, 10 months ago by Abhishek Pokhriyal.

Do you think this is the related dompdf issue I can report to: https://github.com/dompdf/dompdf/issues/1626 ?

there seem to be several related and interlinked issues on the subject of paging. Generally speaking (from my experience in working with dompdf for several years), this issue is quite rare. In your case, you’ll probably find that if you add an item to the order, the table will break onto the next page fine, and if you remove an item there is also no issue. It seems to be happening in scenarios where it’s a close call between fitting or not fitting…

@pomegranate I understand this is not something not due to the plugin but can you suggest some workaround? This is really painful.

I’m afraid not, especially since it’s related to a template customization. The margin trick worked for all the instances that I saw with the default layout, but yours has two tables and appears to slightly be different since you mention removing the margins doesn’t fix it…

Hey @pomegranate @alexmigf

I’ve been trying to get this to work. For that I’ve converted the table in div based structure, however, I’m facing a few issues and hope you can provide some input:

1. The items that have meta pushes the item name out of the row: https://user-images.githubusercontent.com/11808845/80623976-a7858a00-8a68-11ea-82e0-9f0965d152d5.png

2. Do you have any idea how to repeat the header (Product and Quantity) on the second page if it breaks to the second page?

Thanks