I am having an issue with generating a pdf file with the following code. The issue I am facing is that I want the header to show on every page of the pdf and the content not to go out of bounds. Can anyone assist me with this. Following code & images below:
Code
<apex:page controller="StandardProductDisplayController" renderAs="pdf" applyBodyTag="false" showHeader="false">
<head>
<style type="text/css" media="print">
@page {
size: landscape;
@top-center {
content: element(header);
}
@bottom-left {
content: element(footer);
}
}
div.content{
padding-top:10px;
position: left;
}
div.header {
padding: 0px;
position: running(header);
}
div.footer {
display: block;
padding: 5px;
position: running(footer);
}
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}
.mainContent{
font-size: 12px;
text-align:center;
padding-top:10px;
padding-bottom:10px;
padding:3px 7px 2px 7px;
border: 1px solid #444;
}
</style>
</head>
<div class="header">
</div>
<div>
<table align="left">
<thead>
<tr>
<th width="15%" style="font-size: 12px;text-align:center;padding-top:5px; padding-bottom:4px; padding:3px 7px 2px 7px; background-color:#444; color:#fff;border:1px solid #444">Product Picture</th>
<th width="25%" style="font-size: 12px;text-align:center;padding-top:5px; padding-bottom:4px; padding:3px 7px 2px 7px; background-color:#444; color:#fff;border:1px solid #444">Version</th>
</tr>
</thead>
<tbody class="content">
<apex:repeat value="{!records}" var="record">
<tr>
<td style="font-size:12px;border:0.1px solid #000;padding:3px 7px 2px 7px;" align="center"><apex:image id="theImage" value="{!record.URL_Picture__c}" width="35" height="35"/></td>
<td style="font-size:12px;border:0.1px solid #000;padding:3px 7px 2px 7px;"></td>
</tr>
</apex:repeat>
</tbody>
</table>
</div>
<div class="footer">
<div>Page <span class="pagenumber" /> of <span class="pagecount" /></div>
</div>
</apex:page>
Image of the pdf and what I want to be shown.
Notes:
- Where it stated 1 means that the top header needs to be generated below on every page.
- Where is stated 2 means that the content should end there, so it will give enough space for the footer and won't go over the header.
Any help it will be highly appreciated.
Thanks, Darko