Table is overlapping with footer image.
kzhimel opened this issue · comments
Describe the bug
While repeating footer, if the table is multiple pages long the footer image overlap with table data.
To Reproduce
Steps to reproduce the behavior:
- Make a large table
- Try adding footer image via print this plugin
footer: 'img src here', - Press print
- See the overlapping
Expected behavior
There should be a option to adjust footer margin in case of table or large data print. Or the plugin should handle page break more efficiently.
Desktop (please complete the following information):
- OS: windows 10
- Browser: chrome
- Version: latest
Additional context
I have tried various css to avoid this problem still doesn't solve the issues. However I am adding the code:
this is the execution:
function printReport() {
$("#reportBody").printThis({
debug: false,
importCSS: true,
importStyle: true,
removeInline: false,
copyTagClasses: true,
copyTagStyles: true,
canvas: true,
base: false,
loadCSS: "/Content/custom/report-media.css",
footer: 'inside footer tag is a image src',
beforePrint: removePlusBtn(),
afterPrint: enablePlusBtn
});
}
This is print media css:
@media print {
@page {
size: A4; /* auto is the initial value */
/* this affects the margin in the printer settings */
margin: 25mm 25mm 25mm 25mm;
}
.content-page {
position: initial;
top: 0
}
div {
font-size: 1mm;
}
footer {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
margin: 0 auto;
}
.table-breaked {
page-break-before: auto;
margin-top: 10px;
margin-bottom: 10px;
}
.footer-repeat {
display: table-footer-group;
}
.page-break {
visibility: hidden;
page-break-before: always;
margin-top: 5px;
margin-bottom: 5px;
}
tr {
page-break-inside: avoid;
}
thead {
display: table-header-group
}
tfoot {
display: table-row-group
}
.page-break-before {
page-break-before: always;
}
}
The problem is that there's no way to know where to break the table because if you try to introduce a break, the break location will change based on paper size. The table is auto-flowing to the next printed page. The footer we are adding in printThis is not a footer in the same sense as when authoring a Microsoft document, it's merely appended content after the defined print content.
One possible approach is to increase your primary container's bottom margin and then put a negative margin on the footer content. However, with the way tables work in printing, I can't guarantee this will work.