[SalesForce] visualforce PDF – content overlapping with header

I am trying to generate PDF from Visualforce but the problem I am running into is that content overlaps with Header.

Here is the image:

enter image description here

and here is the code:

    <apex:page controller="QuotePDFCustomController" showHeader="false" renderas="pdf" standardStylesheets="false" applyHtmlTag="false" applyBodyTag="false">
<head>
    <style type="text/css" media="print">
        @page {
            @top-center {
                content: element(header);
            }
            @bottom-left {
                content: element(footer);
            }

        }
        div.header {
            padding: 10px;
            position: running(header);
        }
        div.footer {
            display: block;
            padding: 5px;
            position: running(footer);
        }
        .pagenumber:before {
            content: counter(page);
        }
        .pagecount:before {
            content: counter(pages);
        }
    </style>
</head>
<div class="header">
    <img src='{!URLFOR($Resource.fake_logo)}' title="logo" width="200px"/>
</div>
<div class="content">
    <apex:panelGrid columns="2" id="theGrid" style="margin-top: 20px;">
        <apex:panelGrid columns="2" id="CompanyAddressId">
            <apex:outputText value="Company Address" id="theFirst"/>
            <apex:panelGroup id="theGroup">
                <apex:outputText value="{!$Organization.Street}" id="streetId"/>
                <apex:outputText value="{!$Organization.City}" id="cityId"/>
                <apex:outputText value="{!$Organization.State}" id="stateId"/>
                <apex:outputText value="{!$Organization.PostalCode}" id="postalCodeId"/>
                <apex:outputText value="{!$Organization.Country}" id="countryId"/>
            </apex:panelGroup>  
        </apex:panelGrid>
</div>

Best Answer

Here is my modified version of the Visualforce page from Adding page header/footer into a VisualForce page rendered as PDF.

As you have done, I've added applyBodyTag="false" to the apex:page element to get the header/footer to render correctly.

I think the issue is that flying saucer isn't considering the height of the header content when positioning the content. At least with respect to an image in the header.

I found the easiest solution was to put some padding on the top of the page so that it would clear the header.

<apex:page renderAs="pdf" applyBodyTag="false"  >
    <head>
        <style type="text/css" media="print">
            @page {
                padding-top: 40px;
                @top-center {
                    content: element(header);
                }
                @bottom-left {
                    content: element(footer);
                }
            }
            div.header {
                padding: 10px;
                background-color: red;
                position: running(header);
            }
            div.footer {
                display: block;
                padding: 5px;
                position: running(footer);
            }
            .pagenumber:before {
                content: counter(page);
            }
            .pagecount:before {
                content: counter(pages);
            }
        </style>
    </head>

    <div class="header">
        <img src='https://na5.salesforce.com/img/seasonLogos/2015_summer.png' title="logo" width="173px" height="65px" />
    </div>

    <div class="footer">
        <div>Page <span class="pagenumber"/> of <span class="pagecount"/></div>
    </div>

    <div class="content">
        <p>Actual page body information.</p>
        <div style="page-break-after: always"/>
        <p>Page Body content for the second page</p>
    </div>

</apex:page>

It renders as:

Visualforce PDF header with padding to clear image

Related Topic