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?
Thanks in advance!
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?
Thanks in advance!
Hi,
This may help:
Maybe it helps to make margin-bottom a higher number if it is still overlapping.
@hillel Thanks for your reply. But it doesn’t work, its still overlapping
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;
}
@coolisio
If i make margin-bottom to a higher number, the footer move upwards, but the footer should stay at the bottom
@david do you have any suggestions?
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;
}
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?
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.
Hey @david,
i won’t need a repeating header design
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
Supported by Invoice Ninja and Event Schedule