PrintJS : With repeatable header and footer, tbody content overlaps with header and footer in chrome but not on firefox
- Dominant language
- JavaScript
- Stars
- 4.5k
- Forks
- 688
- PR merge metrics
- No merged PRs in 30d
Description
I am trying to use printJS to print a report using the content inside an html div and it is required to have repeating headers and footers on each page of the report. I used the solution I found in this _https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a_ to generate the repeating headers and footers. However, the problem is that the content inside the tbody element overlaps with the content in the footer and header on chrome but not on firefox. The html code for the report is as something like this:
……content……
The printJS code for printing the report is this:
printJS({
documentTitle:"ETP Water Report",
printable: 'printable_report',
type: 'html',
targetStyles:"['*']",
font_size:"",
style:"@page{size: A4;margin-top:20mm;margin-bottom:20mm;}.page{page-break-after:always;} .header-space{height:100px !important;}.footer-space{height:100px !important;} .header-fill{position: fixed !important;top: 0 !important;height: 100px !important;width: 100% !important;}.footer-fill{position: fixed !important;bottom: 0 !important;height: 100px !important;width: 100% !important;} thead{display: table-header-group !important;}tfoot{display: table-footer-group !important;}"
});
Here are the links to the reference images related to the problem:
1. Overlap on chrome:
_https://i.stack.imgur.com/iRGZg.jpg_
2. No overlap on firefox:
_https://i.stack.imgur.com/x1jwI.jpg_
The overlap is happening on google-chrome and not on firefox.
Is there any way to resolve this issue? How do I prevent content overlap with header & footer on chrome? Please help.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the report from the provided printJS call and printable_report markup in Chrome, then compare its output with Firefox using the supplied screenshots and print CSS. Investigate the interaction between the repeated thead/tfoot elements, fixed header-fill/footer-fill elements, and page margins; done means tbody content no longer overlaps either repeated area in Chrome.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100