3

I have VF page where I have css in style. The css works when it is a normal page. Issue comes when we change the page to pdf. When I render the page as pdf the css written on VF page is getting displayed as it is (as text). The css is not working. Can any one tell me what is the reason for this issue. My VF page :

<apex:page controller="SendAndAttachSpecialPriceForm_Controller" sidebar="false" showHeader="false" id="mainpageID" >

<apex:form id="mainformID">
    <style type="text/css">        
        form{
            padding         :   40px;
        }
        .headingStyle{
            padding-left    :   500px; 
            font-size       :   30px;       
            font-weight     :   bold;
        }
        table#tableStyle{
            border          :   1px solid black;
            border-collapse :   collapse;
            width           :   500px;
            font-size       :   16px; 
        }
        tr, td{
            border          :   1px solid black;
            padding-left    :   15px;
        }
        th{
            padding-left    :   15px;
        }
        tr#heading{         
            border-collapse :   collapse;
        }
        div#enduserdivID{
            padding-top     :   90px;
        }
        div#resellerdivID{
            padding-top     :   95px;
        }
    </style>



    <apex:image url="{!URLFOR($Resource.company_Logo)}"/> 
    <apex:outputPanel id="mainOutpanalID">
        <br/>
        <apex:outputText id="headID" value="Special Pricing Authorization" styleclass="headingStyle"></apex:outputText>
        <br/>

        <!-- Table for Enduser Information -->
        <div id="enduserdivID">
            <table id="tableStyle">
                <body>
                    <tr id="heading">
                        <th>Enduser Information:</th>
                        <th></th>
                    </tr>
                    <tr>
                        <th>Company</th>
                        <td>{!accInformation.Name}</td>
                    </tr>
                    <tr>
                        <th>Name</th>
                        <td>{!accInformation.Name}</td>
                    </tr>
                    <tr>
                        <th>Address</th>
                        <td>{!accInformation.BillingCountry}</td>
                    </tr>
                    <tr>
                        <th>City, State Zip</th>
                        <td>{!accInformation.BillingCity}, {!accInformation.BillingState} {!accInformation.BillingStateCode}</td>
                    </tr>
                    <tr>
                        <th>Email</th>
                        <td>{!accInformation.PersonEmail}</td>
                    </tr>
                    <tr>
                        <th>Phone Number</th>
                        <td>{!accInformation.Phone}</td>
                    </tr>
                </body>
            </table>
        </div>

The issue only comes when we render the VF page as pdf.

3

This is happening because the inline style is not wrapped by the <head> tag. Also, theapex:page tag is missing an important attribute of applyBodyTag which should be set to false otherwise your inline style wont get applied to the contents of the pdf.

Here is the important guideline reg. rendering VF pages as PDF:

If you use inline CSS styles, you must set the API version to 28.0 or greater, set < apex:page applyBodyTag="false" >, and add static, valid < head > and < body > tags to your page.

You might want to go through all the guidelines provided at this link

Hope this helps. Btw, I verified this in a dev org that with valid tags and attributes (as mentioned in the link) the pdf renders without any issues with all the styling as expected.

  • thanks that work for me. one more help I have put border to table in VF page which is visible in VF page but not visible on Pdf. Is their any solution for this issue. – Anu Apr 22 '15 at 11:08
  • i think that is coz of the border-collapse and you need to drop that. this is explained in detail here : salesforce.stackexchange.com/questions/16026/… – Rajiv Bhatt Apr 22 '15 at 11:16
  • With complex pages, sometimes the only way to "force" everything to render as desired when you want it as a PDF is to fix problematic areas using inline attributes. It can become a real PITA. – crmprogdev Apr 22 '15 at 13:06
  • Your link is broken, can you please update it? – compski May 21 '19 at 12: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.