Revisions to visualforce PDF - content overlapping with header

Switch to Page rather than Content padding.

Source Link

edited Jul 17, 2015 at 1:09

103k
40
275
601

I found the easiest solution was to put some padding on the top of the contentpage 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.content {
                padding-top: 30px;
            }
            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>

Visualforce PDF header with padding to clear image

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

<apex:page renderAs="pdf" applyBodyTag="false"  >
    <head>
        <style type="text/css" media="print">
            @page {
                @top-center {
                    content: element(header);
                }
                @bottom-left {
                    content: element(footer);
                }
            }
            div.content {
                padding-top: 30px;
            }
            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>

</apex:page>

Visualforce PDF header with padding to clear image

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>

Visualforce PDF header with padding to clear image

added 508 characters in body

Source Link

edited Jul 16, 2015 at 23:01

Daniel Ballinger

103k
40
275
601

It appears that by default Salesforce will render the HTML body tags for you. Try adding applyBodyTag="false" to the apex:page element.

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 content so that it would clear the header.

<apex:page renderAs="pdf" applyBodyTag="false"  >
    <head>
        <style type="text/css" media="print">
            @page {
                @top-center {
                    content: element(header);
                }
                @bottom-left {
                    content: element(footer);
                }
            }
            div.content {
                padding-top: 30px;
            }
            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">
        <div>The<img datesrc='https://na5.salesforce.com/img/seasonLogos/2015_summer.png' istitle="logo" {!TODAY()}<width="173px" height="65px" /div>>
    </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>

</apex:page>

enter image description here Visualforce PDF header with padding to clear image

It appears that by default Salesforce will render the HTML body tags for you. Try adding applyBodyTag="false" to the apex:page element.

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

<apex:page renderAs="pdf" 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">
        <div>The date is {!TODAY()}</div>
    </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>

</apex:page>

enter image description here

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 content so that it would clear the header.

<apex:page renderAs="pdf" applyBodyTag="false"  >
    <head>
        <style type="text/css" media="print">
            @page {
                @top-center {
                    content: element(header);
                }
                @bottom-left {
                    content: element(footer);
                }
            }
            div.content {
                padding-top: 30px;
            }
            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>

</apex:page>

Visualforce PDF header with padding to clear image

added 1625 characters in body

Source Link

edited Jul 16, 2015 at 22:45

Daniel Ballinger

103k
40
275
601

It appears that by default Salesforce will render the HTML body tags for you. Try adding applyBodyTag="false"applyBodyTag="false" to the apex:page element.

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

<apex:page renderAs="pdf" 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">
        <div>The date is {!TODAY()}</div>
    </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>

</apex:page>

It renders as:

enter image description here

It appears that by default Salesforce will render the HTML body tags for you. Try adding applyBodyTag="false" to the apex:page element.

It appears that by default Salesforce will render the HTML body tags for you. Try adding applyBodyTag="false" to the apex:page element.

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

<apex:page renderAs="pdf" 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">
        <div>The date is {!TODAY()}</div>
    </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>

</apex:page>

It renders as:

enter image description here

Source Link

created Jul 16, 2015 at 22:43

Daniel Ballinger

103k
40
275
601

Loading

Stack Exchange Network

Return to Answer