8

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>
Improve this question
4

1 Answer 1

Reset to default
10

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

Improve this answer
8
  • Yes, I already added both the tags applyBodyTag and applyHtmlTag to False.
    – javanoob
    Commented Jul 16, 2015 at 22:44
  • Ah, I see. I'll have a quick go with an image in the header. Maybe you need to specify the Height of the image?
    – Daniel Ballinger
    Commented Jul 16, 2015 at 22:47
  • Ok. Thanks daniel, I will check this once I reach home. Thank you so much for your time and looking into this.
    – javanoob
    Commented Jul 16, 2015 at 22:51
  • @javanoob It seems like flying saucer either isn't taking into account the height of the image in the header or doesn't care about the header size. I've just padded the content down to clear it.
    – Daniel Ballinger
    Commented Jul 16, 2015 at 23:03
  • 1
    @page { padding-top: 40px; } was crucial. Thanks for the answer!
    – Scott Pelak
    Commented Jan 12, 2016 at 1:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .