Sign Up ›
  • VenkatPasumarthi123
  • NEWBIE
  • 0 Points
  • Member since 2019
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 2
    Replies
4 replies

Extra whitespace in table header when rendered as a PDF

Have opened a case with Salesforce on this issue but thought I'd reach out to the dev community to see if anyone has any ideas.

Basically the issue occurs when you render a table with a repeating header as a PDF. On the first page the header will be rendered with extra whitespace above. On subsequent pages the header is fine, though in the sample code below that demonstrates the issue I have a border around the table and the top of the border is missing on all pages save the first.

A similar issue occurs with a repeating footer, though in this case the extra whitespace gets added below the footer. The sample code below does not show this behaviour.

One odd thing I've noticed is that if there is sufficient content before the table on the same page the table renders as expected (both first page and all subsequent pages). This can be observed by including the outputPanel in the sample code below.

<apex:page controller="TestPDFController" standardStylesheets="false" showHeader="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" renderAs="pdf" readOnly="true">
<html>
    <head>
        <style type="text/css">
            @page {
                size: letter portrait;
                margin-top: 1.0in;
                margin-bottom: 1.0in;
                margin-left: 1.0in;
                margin-right: 1.0in;
                counter-increment: page;
                @bottom-right {
                    content: "Page " counter(page)
                }
            }
            body {
                font-family: Arial, sans-serif;
                color: #000;
            }
            .dataTableClass {
                -fs-table-paginate: paginate;
                 border: 1px solid black; 
                 width: 100%;
            }
            .dataTableClass th, .dataTableClass td {
                vertical-align: top;
                text-align: left;
            }
            .dataTableClass .dtColHeader {
                font-size: 9pt;
                font-weight: bold;
            }
            .dataTableClass .dtColData {
                font-size: 9pt;
            }
        </style>
    </head>
  
    <body>
        <apex:outputPanel layout="block" rendered="false">
            <h3>By including these lines the table header...</h3>
            <h3>...renders as expected on all pages</h3>
        </apex:outputPanel>
        <apex:dataTable value="{!accounts}" var="rec" styleClass="dataTableClass" >
            <apex:facet name="header">
                <h3 style="text-align: center;">List of Accounts and Owners</h3>
            </apex:facet>
            <apex:column style="width: 60%;">
                <apex:facet name="header">
                    <apex:outputText value="Account Name" styleClass="dtColHeader" />
                </apex:facet>
                <apex:outputText value="{!rec.Name}" styleClass="dtColData"/>
            </apex:column>
            <apex:column style="width: 40%;">
                <apex:facet name="header">
                    <apex:outputText value="Owner Name" styleClass="dtColHeader" />
                </apex:facet>
                <apex:outputText value="{!rec.Owner.Name}" styleClass="dtColData" />
            </apex:column>
        </apex:dataTable>
    </body>
  
</html>
</apex:page>

public class TestPDFController
{
    public Account[] accounts{get; private set;}

    public TestPDFController()
    {
        init();
    }
  
    private void init()
    {
        this.accounts = [SELECT Id, Name, Owner.Name FROM Account ORDER BY Name LIMIT 100];
    }
}