function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
JskinJskin 

Page breaks in PDF

Apologies I know this has been covered several times in the forum but I have been trying out the code/suggestions for the other posts but can't seem to apply it to my situation.  I am trying render a pdf attachement to an email to show a list on one page and an image on the next.  Both pages have a background image from Static resources on them.  I have managed to get the PDF to split into 2 pages but the list and image appear together on both pages.  Any suggestions on how I can alter my following code to fix this?  Many Thanks.

 

 

<messaging:attachment renderAs="pdf" filename="Venue Specifications">
<html><head>
<style type="text/css" media="print">

@page{
    @bottom-left {                  
    content: element(footer);      
    }   
    size: A4 portrait;
    margin-top:0cm;
    margin-left:0cm;
    margin-right:0cm;
    margin-bottom:0cm;  
}

p
{
color:#666666;
font-family:"Arial Unicode MS";
font-size:10pt;
}

h3
{
color:#E52013;
font-family:"Arial Unicode MS";
font-size:11pt;
font-style:bold;
}

footer
{
color:#A9A9A9;
font-family:"Arial Unicode MS";
font-size:7.5pt;
}
</style>

</head>


<img src="{!URLFOR($Resource.Document_New)}" style="position: fixed; left: 0cm; top:0cm;  z-index:-1" width="21cm" height="29.7"/>

<table style="position: fixed; left: 2.54cm; top:4.25cm; width:16.02cm; height:21.2cm;" border="0.1">
<tr><td>
<b><h3>VENUE SPECIFICATIONS:</h3></b>
<ol>
<li><p>Numbered list.</p></li>
<li>....</li>
</ol>
<p>If you have any difficulties in meeting these requirements please contact us as soon as possible. </p>
</td></tr></table>

<footer>
<table width="15.92cm" valign="top" style="position: fixed; left: 2.54cm; top: 27.1cm;" >
  <colgroup>
    <col span="4" width="3.98cm" />
  </colgroup>
<tr valign="top">
<td>Office Address<br/>Street<br/></td>
<td></td>
<td></td>
</tr>
</table>
</footer>

<div style="page-break-before:always">
<img src="{!URLFOR($Resource.Document_New)}" style="position: fixed; left: 0cm; top:0cm;  z-index:-1" width="21cm" height="29.7"/>

<apex:image style="position: fixed; left: 4cm; top:8cm;"  url="https://cs7.salesforce.com/servlet/servlet.ImageServer?id=........"/>
</div>
</html>
</messaging:attachment>


Best Answer chosen by Admin (Salesforce Developers) 
kranjankranjan
Hi Jskin,

You will also have to remove the style for fixed position from first table. This is causing the issue. I removed that and it worked well. :)

All Answers

kranjankranjan
Hi Jskin,

I have faced this issue too once. You need to place your page break and image in a cell of the table. Then it will work properly. So something like this:

<table border="0" cellpadding="0" cellspacing="0" align="left">
<tr><td align="left">
<div style="page-break-before:always">
<img src="{!URLFOR($Resource.Document_New)}" style="position: fixed; left: 0cm; top:0cm; z-index:-1" width="21cm" height="29.7"/>

<apex:image style="position: fixed; left: 4cm; top:8cm;" url="https://cs7.salesforce.com/servlet/servlet.ImageServer?id=........"/>
</div>
</td></tr>
</table>

Hope this helps.
JskinJskin

Thanks Kamal,

 

I updated as suggested but it showed no change upon opening the pdf.  I also removed the style position for the image as follows and now I get the image on one page only but the numbered list still appears on both.  Any further suggestions?  Many Thanks.

 

<table border="0" cellpadding="0" cellspacing="0" align="left">
<tr><td align="left">
<div style="page-break-before:always">
<img src="{!URLFOR($Resource.Document_New)}" style="position: fixed; left: 0cm; top:0cm; z-index:-1" width="21cm" height="29.7"/>

<apex:image url="https://cs7.salesforce.com/servlet/servlet.ImageServer?id=........"/>
</div>
</td></tr>
</table>

kranjankranjan
Hi Jskin,

You will also have to remove the style for fixed position from first table. This is causing the issue. I removed that and it worked well. :)
This was selected as the best answer
JskinJskin

Thanks again - I changed to position to relative so the list would appear on the correct part of the page and now the list is appearing on the first page and the image on the second page as expected.

kranjankranjan
Gr8. Good to hear... :)