My first page is leaking to the second page, why?
When you add a header or a footer in your PDF that starts at a later page, for instance :
"footer": {
"source": "<html>....</html>",
"height": 150,
"start_at": 2
}And you first page takes the whole height, you'll notice that part of the first page is copied in the second page, which is odd.
This happens because when you add a header/footer, we apply a margin to the document to give some room to your header/footer to be displayed. Otherwise, your header/footer would appear on top of your main document, which is not good.
The issue is that on the first page too, the margin is applied, but you have an element that is already taking the full height, so adding a margin forces the rendered to have a page bigger than the authorized limit, which makes its content leak onto the second page.
Rest assured, we have an easy trick to fix this issue.
All you have to do is remove the margin for the first page. This will take precedence over our margin for the header/footer, and will solve the issue.
For instance, if you have set a footer like the above code, you can add this CSS property to fix the issue:
"css": "@page:first { margin-bottom: 0 }"And of course, if you have set a header:
"css": "@page:first { margin-top: 0 }"You can adjust these depending on your needs (if you already use some margin) or if you want to have both header and footer.
We could set these values automatically so that this article wouldn't need to exist, but if you need to add some margin in your document and we add this fix, it won't be possible for anyone to adjust the margin parameter, which is a critical property frequently used.
Because of that, we can't force this value and let you adjust them perfectly to your use case 🙂