CODEWITHSUNDEEP
mpdf
Mohamed Mufeed
Mohamed Mufeed

Reputation: 1560

How can I push the footer to the next page if the content overlaps it in mpdf?

Technicaly, I know how to set the html footer in mpdf, but I have an issue that I can't get around with.

I am generating an invoice. The invoice have an items table which can vary in the number of items. In the last page(ie. after the items table) of the invoice I am setting a page-footer whith the company consent and a signature field. So that the block containing these two goes at the end of the current page(about 70mm in height). It does'nt nesessarily need to be a footer; a fixed block also works(but the same issue applies).

The Issue

When the list items is relatievly small it works perfectly well as expected; Also, when the list items is more. But, when the list item is in a range the content overlaps.

Currently I have tried:

Option 1 Set the block using a fixed position at the bottom.
Issue: The same.

Option 2 Increase the margin-bottom to 70mm.
Issue: The overlapping is fixed, however when the content is more and needs to have two or more pages worth of items - it leaves so much(70mm) of blank spaces in the previous pages.

Option 3 Set the setAutoBottomMargin to stretch
Issue: The same. (Can't feel any difference)

Option 4 Set a named page reserved for the last page.
Issue: The named page is not working on the first page. ie. It always have a second page. So even when the content is small it takes atleast two pages.

What I expect it to behave like

Note: I am using <sethtmlpagefooter> as the last tag to set the footer for the page at runtime.

Can anybody help me?

If you require any image samples of the current outputs I can provide them. But I think this is a pretty common requirement and somebody would already have figured this out.

If my explaination is off. Please let me know, I can provide more info if needed.

Thank you

Upvotes: 1

Views: 920

Answers (1)

Mohamed Mufeed
Mohamed Mufeed

Reputation: 1560

I am updating this post since I found an issue with this approch when you require a default footer on all other pages and our lastpage footer was on the first page itself. The footer was alone pushed to the next page. But It was an edge case.

for this approch to work there is one requirement. ie. The div must be on the top level

Technically I ended up using the Option 1 in conjunction with the method I described in my old answer.

what I ended up doing

<body>
    <div> ... </div>
    <table> ... </table>
    .
    .
    .
    <div style="height: 75px"></div>
    <div class="fixed-bottom border-top border-white">
        ... <!-- footer content -->
    </div>
</body>

The border-top and the border-white was necessary because without them there was an issue with mpdf calculating the correct width in my specific version

I found out the exact height by making the upper div also fixed-bottom and coloring the border-top differently so I can see when the height is exact

css used

.fixed-bottom {
    position: fixed;
    right: 0mm;
    bottom: 0mm;
    left: 0mm;
    z-index: 1030;
}

.border-top {
    border-top: 1px solid #000;
}

.border-white {
    border-color: #fff;
}

Original Answer

After a bit of struggle I have found a work around.

What I did

  • defined a named html footer block with the content I want.
  • set the footer after the items table using sethtmlpagefooter, so that it is in the last page.
  • added an empty block(div) with a height compensating for the height of the footer & required padding between the items table and the sethtmlpagefooter call.

Issues resolved

  • when the list items are (less & more) in number it already behaves as expected
  • when the list items are in the range which overlaps, instead of the content overlapping the footer- now the empty block overlaps it till the point where the items are just near the footer. so if the items increases the empty block pushes the footer to the next page. If the items increases more it takes up the available space in the previous page as there is no big margins defined

Just documenting here so it may be refferred by anyone having the same issue.

Upvotes: 2

Related Questions