Menu
Target: To give margin of upto 8cm to a dynamically generated pdf, which has repeated header and footer on every page.
Current issue: Although I am able to give margin to the pdf and the content gets properly aligned on the first page, but from the second page onwards the content of the body starts to overlap with the header of the page,
Page 2 and beyond - ISSUE
How it SHOULD LOOK LIKE
What I tried: Tried the solution in related questions like :- Content overlapping with header on second page of PDF and Table headers overlapping on second page when printing/PDF and other ones too, but none of them seem to be working.
Code:-
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Mulish:wght@400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
<title>Document</title>
<style>
/* Styles go here */
@media print {
* {
-webkit-print-color-adjust: exact !important;
}
}
* {
font-family: "Mulish", sans-serif;
}
.section-padding {
padding-bottom: 20px;
}
.table > :not(:last-child) > :last-child > * {
border-bottom-color: inherit;
}
strong {
font-weight: 700 !important;
}
.page-header,
.page-header-space {
height: 250px;
}
.page-footer,
.page-footer-space {
height: 100px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
}
.page {
page-break-after: always;
}
@page {
margin: 5cm;
}
@media print {
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
body {
margin: 0;
}
table {
page-break-inside: auto;
}
tr,
div {
page-break-inside: avoid;
page-break-after: auto;
}
}
</style>
</head>
<body>
<div class="page-header">
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
Header</br>
</div>
<div class="page-footer">
Footer
</div>
<table style="padding: 0; margin: 0; width: 100%;">
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="page" style="color: green; font-weight: bold;">
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
Main content</br>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
crossorigin="anonymous"
></script>
</body>
</html>PS: The issue would be reproducible only if the margin exceeds the value of 1.5cm, also if any other third party tool or any other way is possible to achieve the target please feel free to share.
Thank you!
887
The reason for the overlapping lines is quite simple: The line height is not sufficient to contain the text size. You have "hard-coded" the font-size via inline CSS but did not adjust the line-height , for instance.
After searching through a lot of materials, finally, I can conclude that with increasing page margin the max value one can give to the page header i.e <thead> decreases.
For example,
and so on.
.page-header,
.page-header-space {
height: 250px;
}A point to add, the values given are not strict values and will change based on your use case, but by varying header size based on the margin value, one can achieve the target given in the question.
61
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With