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
m_roarkm_roark 

Controlling layout and style for VisualForce pages rendered as a PDF

Is there a way to do this?

 

I have several VisualForce pages I am using the generate PDF documents.  I find that I cannot seem to control simple layout and style items, such as the format for table headers and the type of font used for the document, using in-line CSS when these pages render as PDFs.  I am easily able to control these elements using in-line CSS when I render these pages as HTML.

 

This is important as several VisualForce elements do not let me define style attributes for an element. I have to use in-line CSS classes to pass to the element's appropriate 'style' attribute.  An example of this is the 'apex: DataTable'element, which requires I pass it a CSS class to the 'headerClass' and 'rowClasses' attributes.

 

However, it is as if the PDF rendering engine is ignoring my in-line CSS.  Is there any way to force the PDF engine to use my CSS, so I can get a PDF output which matches my HTML output?

Message Edited by m_roark on 02-20-2009 09:14 AM
Best Answer chosen by Admin (Salesforce Developers) 
TehNrdTehNrd
Inline css does not like being rendered as a PDF. Add the style to a .css style sheet, upload it to a static resource and then use the apex:stylesheet  tag:

<apex:stylesheet value="{!URLFOR($Resource.quoteStyle)}"/>
 


All Answers
TehNrdTehNrd
Inline css does not like being rendered as a PDF. Add the style to a .css style sheet, upload it to a static resource and then use the apex:stylesheet  tag:

<apex:stylesheet value="{!URLFOR($Resource.quoteStyle)}"/>
 
This was selected as the best answer
m_roarkm_roark
Thanks for the response.  I just had a chance to test it, and it is working for most components.  
 
However, I have need to color alternate rows in the 'apex: Datatable' element.  I am adding two classes to the CSS to handle this, and am passing these to the 'RowClasses' attribute for my Datatable, seen here:
 
<apex:dataTable value="{!License_Invoice__c.Invoice_Products__r}" width="100%" rules="all" border="1" cellpadding="2" var="product" rowClasses="even,odd" headerClass="tableHeader">
            
 
 
The CSS classes look as follows:
 
.odd { 
background-color: White;}
.even
{background-color: LightSteelBlue;}
This renders fine in the HTML version of this page, but not in the PDF. Even weirder, the formatting defined in the class in the 'headerClass' attribute is rendering appropriately.
 
What's going wrong?  Am I simply selecting a color for the rows which is not supported in PDFs? 
 


TehNrdTehNrd
Try using the hexadecimal color format for the color. I really don't know if this will make a difference but it is worth trying.


m_roarkm_roark
The hexadecimal worked!  Thank you so much for your assistance!


TehNrdTehNrd
Nice, no problem.


Kirk F.ax361Kirk F.ax361
I confirm TehNrd's solution: A visual force page rendered as PDF would be styled only intermittently, and randomly, about half the time.  Moving the CSS inside that visualforce page out to a static resource resolved the problem we were having.