0

I am creating a downloaded document from a visualforce page using pdfPage.getContentAsPDF() and passing in some parameters. I am using @page properties to print the document as a page. The first page is to be portrait and all following pages and to be landscape. But I cannot seem to apply a width to the footer on the first page and not the rest. The footer is always too wide for the first page or not wide enough for the remaining pages. I am using page-break-after: always; to define the end of the first page and <apex:repeat> to create the following pages.

***** CSS Snippet

@page  {
    size: 11.69in 8.27in;
    margin-top: 10%;

    @top-right {
        content: element(header-right);
        padding-top: 20px;
    }
    @top-left {
        content: element(header-left);
        padding-top: 20px;
    }
    @bottom-center {
        font-size: 7px;
        content:  element(divFooter-portrait) '{! $Label.Page } ' counter(page) ' / ' counter(pages);
    }
}

@page :first {
    size: 8.27in 11.69in;

    @top-left {
        display: none;
    }

    @bottom-center {
        font-size: 7px;
        content: element(divFooter-portrait) '{! $Label.Page } ' counter(page) ' / ' counter(pages);
    }
}

.divFooter-portrait {
    font-size: 7px;
    width: 7.5in;
    position: running(divFooter-portrait);
    position: fixed;
    bottom: 0;
}

.divFooter-landscape {
    font-size: 7px;
    width: 10in;
    position: running(divFooter-landscape);
    position: fixed;
    bottom: 0;
 }

***** HTML Footer Snippet

</body>
<div class="divFooter-landscape">
    You will find our Terms and Conditions on our website: 
    <hr/>
    <div style="text-align:center">
        {! $Label.MPS_Footer }
    </div>
</div>

<div class="divFooter-portrait">
    You will find our Terms and Conditions on our website: 
    <hr/>
    <div style="text-align:center">
        {! $Label.MPS_Footer }
    </div>
</div>
</apex:page>

1 Answer 1

0

I was able to get a workable solution by doing a bit of adjustment with your CSS. Though this solution works but it is more of a result of trial and error on my part and with the reference from few Stack Overflow questions. If I am to consolidate to a short summary, the trick here is to set the width in multiple places in css. Added yellow color to highlight the footer area in the page.

VF Page

<apex:page standardController="Account" showHeader="false" sidebar="false" standardStylesheets="false" renderAs="pdf" applyBodyTag="false" applyHtmlTag="false">
    <head>
        <style>            
            @page {
                size: 8.27in 11.69in;
                @bottom-center {
                    font-size: 7px;
                    content: element(footer-potrait) 'Page ' counter(page) ' / ' counter(pages);
                    background: yellow;
                    opacity: 0.5;
                }            
            }  
            
            @page land {
                size: 11.69in 8.27in;
                @bottom-center {
                    font-size: 7px;
                    content: element(footer-landscape) 'Page ' counter(page) ' / ' counter(pages);
                    background: yellow;
                    opacity: 0.5;            
                }            
            }
            .landscapePage { 
                page:land; 
                width: 10.60in;
                overflow: hidden;
            }
            div.footer-landscape {
                font-size: 7px;
                display: block;
                position: running(footer-landscape);
                background: yellow;
                opacity: 0.5;
            }
            div.footer-potrait {
                font-size: 7px;
                display: block;
                position: running(footer-potrait);
                background: yellow;
                opacity: 0.5;
            }            
        </style>
    </head>
    <body>
        <div class="footer-landscape">
            You will find our Terms and Conditions on our website: 
            <hr/>
            <div style="text-align:center;">
                Awsome Footer Content Lanscape
            </div>
        </div>        
        <div class="footer-potrait">
            You will find our Terms and Conditions on our website: 
            <hr/>
            <div style="text-align:center;">
                Awsome Footer Content Potrait
            </div>
        </div>        
        <div>
            "Potrait - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
        </div>
        <span class="pageBreak"/>
        <div class="landscapePage">
            "Landscape - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.."
        </div>
        <span class="pageBreak"/>
        <div class="landscapePage">
            "Landscape - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
        </div>        
    </body>
</apex:page>

Screen Shots 1

enter image description here

Screen Shots 2

enter image description here

You must log in to answer this question.

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