Page Break is wrong – footer problem

Hello @wpecom

I’m sorry to hear that.

I don’t think it’s related to an update of the plugin, but a specific combination of product row heights (which might or might not jump to the next page).

Do you have other CSS modifications that you made?

Let me know.

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

Further to the above comment, note that the footer (3cm) in your custom CSS is higher than the space you cleared for it (-2cm). To prevent overlap at any time, these need to be the same. The bottom page margin should also be adjusted to this. This requirement hasn’t changed though, so I think earlier tests might simply not have met the same ‘edge case’ that you found now.

summarizing, if you want a footer height of 3cm, you’ll want to clear the same height and also reserve that space in the page margin:

@page {
	margin-bottom: 4cm;
}
#footer {
	bottom: -3cm;
	height: 3cm;
}

Thank you for the answers! Both are correct and yielded the solution.

Indeed it occured with an “edge case”, just shortly after a lot of updates.
(And thanks Ewout for the explaination, I’ve seen the equal numbers of bottom and height in other tickets but with my odd numbers it worked somehow for me. Now it makes sense to me!)

Fix:
The problem was that my custom text (under the product list table) inside the “invoice.php” was causing the error with the page break. I gave my text a css margin with <div class="txt">Custom Text</div> and now the pages break correctly.

Now style.css looks like:

@page {
	margin-top: 1cm;
	margin-bottom: 4cm;
	margin-left: 2cm;
	margin-right: 2cm;
}
div.txt {
    margin-top: 0.5cm;
    margin-bottom: 0.5cm;
}
#footer {
	bottom: -3cm;
	height: 3cm;
}

Page is breaking correctly now. Footer is fully displaying on the bottom of the 2nd page and the on the 1st page the last 4cm are empty as defined.
I’m fine with this. However, if there is a super easy way to not have 4cm empty page space with a page break, or even have the footer directly follow the rest of the content, let me know.

Greets

Glad to hear that resolved the issue!

However, if there is a super easy way to not have 4cm empty page space with a page break, or even have the footer directly follow the rest of the content, let me know.

Not a ‘super easy’ way, but if you already have a custom template it’s not that difficult either.
You could reduce the footer margin to 1cm and set the footer bottom to 0 instead of -3cm, then insert a regular div with no content (spacer) just before the footer, and make that the same height as the footer. This way there’s an invisible element the size of the footer that moves along with your content and makes sure there’s never anything overlapping with your footer.