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
ShashvatMahendruShashvatMahendru 

CSS Styles in PDF lost

Hi

 

I am trying to render  a VF page  as PDF, the issue is that it looses all its CSS styling when I do that, please help :

 

VF page :

 

<apex:page controller="APController" id="pgAP" sidebar="false" showHeader="false">   
   <head>
     <style>
        .cls {font-size:9pt;
              font-weight:bold!important;
              white-space:pre-wrap;}  
     </style>
   </head>
   <apex:form id="frm1">
      <!-- <apex:pageBlock title="AP report" id="blk1">  -->
         <table border="1">
           <th>Contact</th>
            <tr>
             <td width="300">   
              <apex:repeat value="{!lstContacts}" var="cn" id="theRepeat">
                <apex:outputText styleClass="cls" value="{!cn.Name}" id="theName" /><br/>
                <apex:outputText styleClass="cls" value="{!cn.Title}" id="theTitle"/><br/>
              </apex:repeat>
             </td>
            </tr>
           </table>
      <!--  </apex:pageBlock>  -->
   </apex:form>
</apex:page>

 

Thanks

Shasvat

Shiv ShankarShiv Shankar
try this attribute with <apex:page standardStyleSheet = "false" >
Adam HowarthAdam Howarth

Hey,

 

By default, the default styles arent applied. So i suppose you have two options

 

1. Manually include the standard stylesheets:

 

 <apex:page renderas="pdf">
 <head>
<apex:stylesheet value="/sCSS/20.0/sprites/1290470434000/Theme3/default/sf/common.css"/> 
<apex:stylesheet value="/sCSS/20.0/sprites/1290470434000/Theme3/default/sf/extended.css"/>
 </head>
</apex:page>

 Which would be ok, but not sure how the versions hold up through updates.

 

Or...

 

2. You can do something similar, but copy the styles into a new css file and upload it as a static resource:

 

<apex:page renderas="pdf">
 <head>
<apex:stylesheet value="{!$Resource.CustomStyleSheet}"/>
 <style> 
 </head>
</apex:page>

 Up to you though dude.

 

I'd recommend number 2 so you can control the styles regardless of any Salesforce Platform changes.