+ Start a Discussion
Jon KeenerJon Keener 

PDF Rendering Problem - Overlapping Text in PDF

I'm sometimes having a problem with PDF rendering in a Visualforce Page.  Most of the time it works, but in some cases, I get overlapping text like the following:
 
 
 
 
Rendering this same page as a regular VF page draws the page fine in the browser.  It appears to be a data issue of some sort, possibly situations where a single datatable spans multiple pages.  I haven't ran into a scenario yet where the amount of data is low and the overlapping text is occurring.  It isn't as simple as spanning multiple pages causing the problem, because I have a lot of good scenarios where spanning multiple pages works perfectly fine.
 
Below is a snippet of code from the VF page:
 
Code:
            <apex:outputText value="Open Activities" styleClass="subtitle"/>
                 <apex:dataTable value="{!OpenActivities}" var="lines" styleClass="dataTable" columnclasses="lineitems" headerClass="dataTableHeader" id="OpenActivitiesSection" width="100%">
      <apex:column style="width: 250px" >
            <apex:facet name="header"><b>Open Activity Subject</b></apex:facet>
       <apex:outputText value="{!lines.Subject}"/>
      </apex:column>
      <apex:column style="width: 100px" >
            <apex:facet name="header"><b>Assigned To</b></apex:facet>
       <apex:outputText value="{!lines.AssignedToName}"/>
      </apex:column>
      <apex:column style="width: 150px" >
            <apex:facet name="header"><b>Due Date</b></apex:facet>
       <apex:outputText value="{!lines.ActivityDate_Formatted}"/>
      </apex:column>
      <apex:column >
            <apex:facet name="header"><b>Comments</b></apex:facet>
                            <apex:outputText styleClass="item" escape="true" value="{!lines.Comments}"/>
      </apex:column>
     </apex:dataTable>



            <apex:outputText value="Call Reports" styleClass="subtitle"/>
            <apex:outputText value="{!CallReports_Desc}" styleClass="subtitle2"/>
                 <apex:dataTable value="{!CallReports}" var="lines" styleClass="dataTable" columnclasses="lineitems" headerClass="dataTableHeader" id="CallReportsSection" width="100%">
      <apex:column style="width: 150px" >
            <apex:facet name="header"><b>Call Report Date</b></apex:facet>
       <apex:outputText value="{!lines.callReportDate_Formatted}"  />
      </apex:column>
      <apex:column style="width: 100px" rendered="{!Not(CallReports_LimittoOwner)}">
            <apex:facet name="header"><b>Created By</b></apex:facet>
       <apex:outputText value="{!lines.CallReportCreatedByName}"/>
      </apex:column>
      <apex:column style="width: 250px">
            <apex:facet name="header"><b>Subject</b></apex:facet>
       <apex:outputText value="{!lines.Subject}"/>
      </apex:column>
      <apex:column >
            <apex:facet name="header"><b>Comments</b></apex:facet>
                            <apex:outputText styleClass="item" escape="true" value="{!lines.Comments}"/>
      </apex:column>
     </apex:dataTable>


            <apex:outputText value="Opportunities" styleClass="subtitle" rendered="{!IF(Opportunities_Count>0,'true','false')}"/>
                 <apex:dataTable value="{!Account.Opportunities}" var="lines" styleClass="dataTable" columnclasses="lineitems" headerClass="dataTableHeader" id="OpportunitiesSection" width="100%" rendered="{!IF(Opportunities_Count>0,'true','false')}">
      <apex:column >
            <apex:facet name="header"><b>Opportunity Name</b></apex:facet>
       <apex:outputField value="{!lines.Name}"/>
      </apex:column>
      <apex:column >
            <apex:facet name="header"><b>Stage</b></apex:facet>
       <apex:outputField value="{!lines.StageName}"/>
      </apex:column>
      <apex:column >
            <apex:facet name="header"><b>Close Date</b></apex:facet>
       <apex:outputField value="{!lines.CloseDate}"/>
      </apex:column>
      <apex:column >
            <apex:facet name="header"><b>Amount</b></apex:facet>
       <apex:outputField value="{!lines.Amount}"/>
      </apex:column>
      <apex:column >
            <apex:facet name="header"><b>Probability %</b></apex:facet>
       <apex:outputField value="{!lines.Probability}"/>
      </apex:column>
      <apex:column >
            <apex:facet name="header"><b>Competition</b></apex:facet>
       <apex:outputField value="{!lines.Competition__c}"/>
      </apex:column>
      <apex:column >
            <apex:facet name="header"><b>Target Price</b></apex:facet>
       <apex:outputField value="{!lines.Target_Price__c}"/>
      </apex:column>
     </apex:dataTable>

 
 
 
 
Any ideas on what could be causing this type of an issue would be greatly appreciated!
 
Thanks!
 
Jon Keener
Best Answer chosen by Admin (Salesforce Developers) 
Jon KeenerJon Keener

It appears, changing

Code:
 /* Specify preference to not break a page at
  any element with this style. */
 page-break-before: avoid;


 
to

Code:
 /* Specify preference to not break a page at
  any element with this style. */
 page-break-before: auto;


 

solved the problem, at least for my first couple of tests.  This style was on my DataTables.

Thanks!

Jon Keener

All Answers

Sam.arjSam.arj

Check your stylesheet code, styles related to normal flow of layout or absolute positions would be a potential cause.

Jon KeenerJon Keener

It appears, changing

Code:
 /* Specify preference to not break a page at
  any element with this style. */
 page-break-before: avoid;


 
to

Code:
 /* Specify preference to not break a page at
  any element with this style. */
 page-break-before: auto;


 

solved the problem, at least for my first couple of tests.  This style was on my DataTables.

Thanks!

Jon Keener

This was selected as the best answer