PDF Pagination / Truncation Issues

Hosted • invoicing.co | v5
1

I’m having several issues with the formatting and separating of pages in generated invoice PDFs.

From one page to the next, I’m seeing the following empty rows, making it appear as if the invoice tables are oddly truncated between pages, acting as if this is just a web page being printed. This gives a highly unprofessional appearance, and it is not acceptable for our needs.

Here’s an example of the kind of truncation I’m talking about:

CleanShot 2024-05-24 at 18.57.00
CleanShot 2024-05-24 at 18.57.00860×1252 18.4 KB

Here’s the same image with the problematic portion in red if you can’t see what I’m talking about:

CleanShot 2024-05-24 at 18.57.00-highlighted
CleanShot 2024-05-24 at 18.57.00-highlighted860×1252 20.8 KB

Furthermore, we’re noticing an issue where the footer is not appearing at the bottom of the last page of the PDF. You can see an example of this issue in the following image:

CleanShot 2024-05-24 at 19.09.09
CleanShot 2024-05-24 at 19.09.09852×1153 23 KB

As you can see, again, the PDF is being improperly truncated between the second and final pages. Moreover, the last page is mostly filled with blank space below the footer which makes the footer appear more as if it were supposed to be a “header” (which it’s not).

What I’d like to have happen here is for the table to have some empty space (or at least the page to have some empty space) to fill the area between the last entry in the table, and the total / footer information, so that I can have the footer information appear at the bottom, and also so that the subtotal, total, and balance information appears near the bottom as well (just above the footer). As it stands, the footer is appearing at the top of the last page, which is very confusing and also not acceptable for a professional-looking invoice.

I don’t see a way to resolve this issue in HTML mode in the Invoice Design customization editor. These issues only occur when attempting to generate PDF output, which means I can’t properly target this behavior in HTML mode and I have no way of knowing what CSS should be used to correct this issue.

Please help us to resolve these issues right away, as these are critical for our business and our continued usage of Invoice Ninja.

2

I would suggest using

Thead

Tbody

Tfoot

Sections, this will allow you to use the tfooters to space your bottom sections allowing footers to be pinned at the bottom of each page.

There are some examples in the current designs where we use this to allow sections to space accurately. Just to note, when previewing, you will want to toggle between html mode and pdf preview. The previews using the @media / @print tags which is how the pdf actually renders from the html

3

@david Can you please link me to the examples you mention and also give some sample code of how to target these sections in CSS properly?

4

If you need to have strict fixed headers / footers this is the code you want.

Just to note, it is not possible with html/css to select the last page only for the footer content (with fixed footers)

It is possible to isolate the footer onto the last page, but then you will lose the ability to have the footer fixed to the bottom on that page.

<html>
    <head>
<style id="style">
    @import url($font_url);

    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-family: $font_name, Helvetica, sans-serif;
        font-size: $font_size !important;
        zoom: 80%;
    }

    table tr td, table tr, th {
        font-size: $font_size !important;
    }


    body, html {
        margin: 0;
        padding: 0;
    }

    @page {
        margin: 0 !important;
        size: $page_size $page_layout;
    }

    p {
        margin: 0;
        padding: 0;
    }

    #header {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 20px;
        background-color: #2d2c2a;
        color: white;
        line-height: var(--line-height);
        position: fixed;
        top: 0;
        width: 100%;
    }

    #header, #header-spacer {
        height: 160px;
        padding: 2rem;
        margin-bottom: 1rem;
    }
    

    #footer {
        margin-top: 1rem;
        background-color: #2d2c2a;
        min-width: 100%;
        position: fixed;
        bottom: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
        color: white;
    }

    #footer, #footer-spacer {
        height: 160px;
        padding: 1rem 3rem;
        margin-top: 1rem;
    }

    [data-ref="total_table-footer"] {
        padding-top: 0.5rem
    }

    [data-ref="footer_content"]{
        padding-right: 2rem;
        margin-right: 2rem;
    }

    table {
        width: 100%;
    }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
    </head>
    <body>
<div id="header">
<!-- header content-->
</div>

<div id="body">
    <table id="spacer-table" cellspacing="0" >
        <thead>
        <tr>
            <td>
                <div id="header-spacer"></div>
            </td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <!-- central content -->
                <!-- central content -->
            </td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td>
                <div id="footer-spacer"></div>
            </td>
        </tr>
        </tfoot>
    </table>
</div>
<div id="footer">
    <div style="width: 100%;">
        <p data-ref="footer_content">$entity_footer</p>
    </div>
</div>
</body>
</html>
5

@david Your solution does not do what I’m asking for at all. I don’t want the footer to appear on every page. I’m confused why you think this is what we want when I described it above quite clearly. We want the footer to be at the very bottom of the very last page of the document. After examining some of the other available designs, I’m not seeing any that do this and yours certainly doesn’t either. Please help us to rectify this problem.

6

As mentioned, it is not possible to place a footer on the last page at the very bottom with html/css

7

@david I don’t understand why you’re saying this is impossible. This issue has been addressed on this forum previously and it was indicated by several developers at the time that this sort of functionality would be able to work, and that it would be integrated into the core. It appears that it’s still not working after 3 years, however. I’m not sure why this should be an impossible feature.

See the following threads where this same sort of issue was discussed and it was said that this functionality would be able to work:

1 Like
8

Do you have a link to this?

The issue is the limitation with html/css. It doesn’t have anything to do with the application.

9

@david Do I have a link to what?

10

Also, here’s yet another forum post mentioning this same issue: Footer at the bottom of the last page

I don’t understand why this functionality hasn’t been implemented yet when your customers have been asking for this for years. My request is evidently not unique.

11

Hey @david,

I just stumbled across this for another project. Would Paged.js — Getting Started with Paged.js not solve the problem? It would also allow custom design for the page numbering.

1 Like