Footer Not Displaying at Bottom of Invoice After Update

Self-Hosted | v5
1

Version ie <v5.10.30>

After the recent update, I noticed an issue with the custom footer in my invoices. Previously, my footer was displayed at the bottom of the page as expected, but now it appears directly below the line items, rather than being fixed at the bottom of the page.

Here’s the HTML code I am using for the footer:

<div style="display: flex; justify-content: space-between;">
    <!-- Company Information -->
    <div style="flex: 1; padding: 0 10px;">
        <p>Example Company</p>
        <p>Example Street 123<br>12345 Example City<br>Country</p>
    </div>
    <!-- Contact Information -->
    <div style="flex: 1; padding: 0 10px;">
        <p>Contact</p>
        <p>Phone: +49 1234 567890<br>
        Email: <a style="color: rgb(0, 0, 0);" href="mailto:[email protected]">[email protected]</a><br>
        Website: <a style="color: rgb(0, 0, 0);" href="https://www.example.com" target="_blank" rel="noopener">www.example.com</a><br>
        Tax Number: 123456789</p>
    </div>
    <!-- Bank Details -->
    <div style="flex: 1; padding: 0 10px;">
        <p>Bank Details</p>
        <p>Example Bank<br>
        Sort Code: 10010010<br>
        IBAN: DE00123456789012345678<br>
        BIC/SWIFT: EXAMPDEBXXX</p>
    </div>
</div>

The footer does not stay at the bottom of the page when there are fewer line items. Instead, it appears immediately after the line items, leaving blank space between the footer and the bottom of the page.

2

Hi,

Maybe this will help:

3

Hi, I’ve already tried this solution, but unfortunately, it made no difference :confused:

4

I suggest asking in a discussion on GitHub

5

I believe I have found a way round this.
In Invoice Design, Custom Design, Design, “Includes”, I have replaced the standard
#footer {
margin-top: 30px;
}
with this:

#footer {
margin-top: 30px;
bottom: 0;
position: fixed;
}

It works: The footer is now displayed at the bottom of my invoices!
1 Like