6

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>
6

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

  • Yes, I already added both the tags applyBodyTag and applyHtmlTag to False. – javanoob Jul 16 '15 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 Jul 16 '15 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 Jul 16 '15 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 Jul 16 '15 at 23:03
  • Daniel, When I add height property to the header it is working only on the first page and second page onwards it is overlapping with the content. Can you try your example making it flow into the second page when you get chance? Thanks so much! – javanoob Jul 16 '15 at 23:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.