Overlapping Footer / Page Break

Self-Hosted | v5
1

Heyho,
i got this problem, my table is under the footer when i make long invoices. How i can i resolve this? Perhabs i can insert a manual page break or what can i do?

Unbenannt
Unbenannt1103×489 106 KB

Thanks in advance! :wave:

2

Hi,

This may help:

3

Maybe it helps to make margin-bottom a higher number if it is still overlapping.

4

@hillel Thanks for your reply. But it doesn’t work, its still overlapping :pensive:

Unbenannt
Unbenannt1201×351 32.4 KB

This is my .repeating-footer:

    .repeating-footer {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: ;
        grid-column-gap: 30px;
        grid-row-gap: 0px;
        align-content: center;
        justify-content: center;
        color: #b1b1b1;
        padding: 10px;
        position: fixed;
        bottom: -50px;
    }
5

@coolisio
If i make margin-bottom to a higher number, the footer move upwards, but the footer should stay at the bottom :pensive:

6

@david do you have any suggestions?

7

Have a look at the calm design for how we achieved this.

tldr,

you need to use

<table>

<thead>
<thead>

<tbody>
</tbody>

<tfoot>
</tfoot>

</table>

Once configured, you’ll want to set a default height for your tfoot and thead, this will allow you to set a fix header/footer position and the table contents will not overlap



    .repeating-footer,
    .repeating-footer-space {
        height: 150px;
    }

    .repeating-header {
        position: fixed;
        top: 0;
    }

    .repeating-footer {
        position: fixed;
        bottom: 0;

    }

    #header {
        position: fixed;
        top: 0;
    }

    #footer {
        position: fixed;
        bottom: 0;
        border-top: 1px solid #000;
        width: 82%;
        min-height:100px;
        padding-top: 0.5rem;
        margin-top: 40px;
    }
1 Like
8

Hey @david
where do i have to put this in?

And can i copy this settings and it works, or do i have to change them?

9

This is only a guide of what you need to start the building blocks for a repeating header design.

They are by far the hardest designs to get right and take a lot of time and energy to fine tune.

10

Hey @david,
i won’t need a repeating header design :man_shrugging:

For me its okay, when the table is not behind the footer and goes on, on the second page. On the second page i dont need the header from the first page with Company Logo and so on.

I think i only need a page break befor the table is overlapping the footer :man_shrugging: