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.

Improve this question

1 Answer 1

Reset to default
4

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.

Improve this answer
4
  • 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
    Commented Apr 22, 2015 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
    Commented Apr 22, 2015 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
    Commented Apr 22, 2015 at 13:06
  • Your link is broken, can you please update it?
    – compski
    Commented May 21, 2019 at 12:38

You must log in to answer this question.

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