Menu
I am using Flying Saucer R8 to generate PDF files. The PDFs need a header which is going to be repeated on every page. The header is going to be specified by the user so I am unable to determine it's height. I managed to make the header repeat on every page but the problem is that if the header has more than one row of text, it does not dynamically readjust the height of the body and it ends up overlapping it. Here is my code:
<!DOCTYPE html>
<html>
<head>
<style>
@page {
size: 4.18in 6.88in;
margin: 0.25in;
@top-center {content: element(header);}
}
#header {
color: red;
display: block;
position: running(header);
}
</style>
</head>
<body>
<div id="header">
<-- Lots of text here -->
</div>
<div class="section">
<-- Lots of text here -->
</div>
</body>
</html>
After generating with Flying Saucer the resulting PDF looks like this:
Can anyone please help me find a solution for my header not to overlap with the rest of the body?
404
If anyone else is having this problem I managed to find a workaround for it. To dynamically calculate the size of the header in your PDF forget about CSS running headers and instead make your whole page an HTML table and put your header in the thead section. Use the following CSS rule to make the thead repeat on each page:
table {
-fs-table-paginate: paginate;
}
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