crabbly / crabbly/Print.js

PrintJS : With repeatable header and footer, tbody content overlaps with header and footer in chrome but not on firefox

Open
#652 0 comments 0 reactions 0 assignees View on GitHub
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……


I am the header









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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.