I am working on generating PDF using Freemarker which has dynamic contents. It can either be a single page PDF or multiple pages PDF depending upon the contents fetched from the external resource.
The issue I am currently facing is with the multiple pages scenario. The content on second page is overlapped with the header.
.ftl file
<html>
<head>
<style>
<#include "customStyles.css"/>
@page {
margin: 36px 36px 36px 36px;
size: landscape;
@top-center {content: element(header)}
}
#header {position: running(header);}
</style>
</head>
<body>
<div id="header">
<div class="headerText">Header Text</div>
<hr style="width: 100%"/>
</div>
<div class="content">
<#list fields?keys as key>
<label for="key">${key}</label>
<span id="key">${fields[key]}</span>
</#list>
</div>
</body>
</html>
customStyles.css file
#header {
position: fixed;
width: 100%;
top: 0;
}
.headerText {
font-size: 17px;
color: #000000;
}
hr {
display: block;
height: 2px;
border: 0;
border-top: 2px solid #000000;
}
.content {
margin-top: 20px;
page-break-inside: avoid;
}
The first page of pdf is displayed perfectly having the header on top of the page and its content below it. However, content is being overlapped with the header on second page when the list of fields is much larger to fit on a single page.
I have tried following ways from the accepted answers from previous posts. Unfortunately, they did not work for multiple pages scenario.
- Added top padding to the body.
body {
padding-top: 50px;
}
- Provided a height of 40px to the header but did not work as expected.
#header {
position: fixed;
width: 100%;
top: 0;
height: 40px;
}
- Increased page top margin.
@page {
margin-top: 50mm;
}
P.S.: Please don't close this question as duplicate. I am unable to find any solution that displays the contents properly without overlapping on the second page.
