function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Shalini RShalini R 

Not able to align VF component as footer in VF as pdf file

Hi All,

Actually, I tried to reuse the content in the Difference VF page. For that created new VF components. When added the Vf component in the VF page working fine. But when i tried to show the content which is coming from the Component at the bottom of the Vf page, can be showing error like 'PDF generation failed. Check the page markup is valid.'.

Please refer the below code and let me share your thoughts.

VF page code:

<apex:page renderAs="pdf" sidebar="false" showHeader="false" applyHtmlTag="false" applyBodyTag="false">
 <head>
    <style type="text/css" media="print">
      @page {                                 
        @top-left {
          content: element(header)
        }
        @bottom-left {
          content: element(footer);
        }
        margin:45mm 5mm 55mm 5mm;
        size:portrait;
        font-family: sans-serif;
     }                        
    div.header {
         padding-bottom: 50px;
         position: running(header);
    }  
    div.footer {
         display: block;
         padding: 10px;
         position: running(footer);
    }               
    </style>    
    </head>
 <div class="header">
  <c:Component1 ></c:Component1 >
 </div>
 
 <div class="footer">
  <c:Component2></c:Component2>  
 </div>
 
 <div>
 Test kjlkdfl
 </div>
 </apex:page>

Component1 code :

<apex:component > Test Header </apex:component>

Component2 code :

<apex:component > Test Footer </apex:component>

 

Thanks

Shalini R

 

Raj VakatiRaj Vakati
Its a problme with your css
.. 

use this code
  
<apex:page renderAs="pdf" sidebar="false" showHeader="false" applyHtmlTag="false" applyBodyTag="false">
    <head>
        <style type="text/css" media="print">
            @page {                                 
            @top-left {
            content: element(header)
            }
            @bottom-left {
            content: element(footer);
            }
            margin:45mm 5mm 55mm 5mm;
            size:portrait;
            font-family: sans-serif;
            }                        
            div.header {
            padding-bottom: 50px;
            position: running(header);
            }  
            div.footer {
            padding: 10px;
            }               
        </style>    
    </head>
    <div class="header">
        <c:Component1 ></c:Component1 >
    </div>
    
    <div class="footer">
        <c:Component2></c:Component2>  
    </div>
    
    <div>
        Test kjlkdfl
    </div>
</apex:page>


 
Ajay K DubediAjay K Dubedi
Hi Shalini, 

Below code can fullfill your requirements. Hope this will work for you.

Css:

<@page {
size:portrait;
margin-left: 2.54cm;
margin-right: 2.54cm;
margin-top: 2.54cm;
margin-bottom: 2.54cm;
@top-center {
content: element(header);
}
@bottom-left {
content: element(footer);
}
}
div.header {
padding: 10px;
position: running(header);
text-align: center;
}
div.footer {
padding: 5px;
position: running(footer);
}
.pagenumber:before {
content: counter(page);
}
.pagecount:after {
content: counter(pages);
}


VF page:

<apex:page controller="AttachPDFTerryTest" renderas="pdf" showheader="false" standardstylesheets="false"> <apex:stylesheet value="{!Resource[resourceFileName]}"/> <div class="header"><div></div>
</div>
<div class="footer"><div></div>
</div>
Here is the text on my cover page! Sweet! <div style="page-break-before:always"> </div>
Here is the text on my 2nd page! Nice! <div class="header"><div>Header For All But Cover Page</div>
</div>
<div class="footer"><div>Footer For All But Cover Page: Page <span class="pagenumber"/> of <span class="pagecount"/></div>
</div>
</apex:page>

Please mark this as best answer if this solves your problem.

Thank you
Ajay Dubedi