Footer at the bottom of the page

Self-Hosted | v5
1

Hello there.
yes, probably it is related to this topic, but I’m not sure.

with my fresh installation of IN - v5.1.21-C44 in docker I’m not able to get the footer at the bottom of the generated invoice.

when I add a footer in the tab “Footer” I see the following in generated pdf:

Unbenannt
Unbenannt1190×1679 188 KB

the line “Footer Footer…” must appear at the bottom of the page, however, it is appearing exactly after the end of the content of the invoice.

I’m not an expert in css, I’ve tried to add styles to #footer like - bottom:0; position:relative and similar… but all my attempts made no difference.

the switch - footer on all pages or only on the last page also made no difference.

As a basis, I use the template Business.

any ideas or suggestions on how to place it properly?

2

I had exactly the same issue. Add these to lines to #footer

position: fixed;
bottom: 0;

You were almost there - the position cannot be relative :wink:

1 Like
3

I’ve tried it, but it wasn’t successful.
last time I’ve defined <style> block in the footnote to manage styles in the way:

#footer{
            page-break-inside: avoid;
            postion:fixed;
            bottom:0;
}

and haven’t got necessary result
now I’ve tried inline style:

<div id="footer" style="position:fixed; bottom:0; >

and it works. thank you for pointing the exact right way.

Now I have the content overlapping the footnote :/. I saw this issue opened somewhere already … will search for it.

many thanks!

4

@ben, any thoughts on this, can we make it work out of the box?

5

This can be really hacky, we had tried this with our logo for white label. At the end of the day, that should work just fine if you have one page. For multiple pages, that fixed (and z-index) will cause a ton of pain & it’s really tricky to get it working.

6

When I was researching for a solution to this, I came across this code on github (links to the article are in the code). It was designed specifically to cope with single and multi pages.

HTH

2 Likes
7

How does this work with other formats? A3? JIS-B5?

8

@ben I would guess you change the dimensions of the page in the stylesheet and rename those sections to A3, Letter or whatever.

9

What do you think about adding this into core, @david?

1 Like
10

It should indeed be integrated into the core:

11

We’re in process of ditching these options, as they didn’t work as planned. For now Bold & Modern will have repeat header/footer and rest of the designs will use standard layout.

However, you can make custom design with CSS & HTML provided by Bold.

Here’s the source code, I’ve left comments so it is easier for the people to understand.

Thanks.

12

Thanks ben. Can you tell me which part of the css needs to be applied to Plain design to fix the footer problem?

13

It’s a bit tricky to achieve it with Plain as it needs structural change. We have a plan to make this dynamic option in the future, so for now we suggest using either Bold or Modern to achieve this functionality.

14

Any solution yet? I am also using plain and want the footer to be at page bottom:

Group 4
Group 4750×467 51.7 KB

<div class="repeating-footerx" id="footer">
    <p data-ref="total_table-footer">$entity_footer</p>

    <script>
        // Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.
        document.addEventListener('DOMContentLoaded', () => {
            let tables = [
                'product-table', 'task-table', 'delivery-note-table',
                'statement-invoice-table', 'statement-payment-table', 'statement-unapplied-payment-table','statement-aging-table-totals',
                'statement-invoice-table-totals', 'statement-payment-table-totals', 'statement-unapplied-payment-table-totals', 'statement-aging-table',
                'client-details', 'vendor-details', 'swiss-qr', 'shipping-details', 'statement-credit-table', 'statement-credit-table-totals',
            ];

            tables.forEach((tableIdentifier) => {
                document.getElementById(tableIdentifier) && document.getElementById(tableIdentifier).childElementCount === 0
                    ? document.getElementById(tableIdentifier).style.display = 'none'
                    : '';
            });
        });
    </script>
</div>

<div style="text-align: center;">
<p><strong>Bitte beachten Sie die gesetzlichen Vorschriften zur Aufbewahrungsfrist dieser Rechnung.</strong></p>
</div>
15

Ok for now I solved it also by starting my custom template based on the BOLD theme. Which has the fixed footer at the bottom by default.