You need to sign in to do that
Don't have an account?
ministe2003
Visualforce Email not applying CSS to DataTable
Hi,
I'm doing a visualforce email and using a datatable to display a list of data. I'm styling it with CSS which works fine in the preview but once I email myself the test, the css is not applied and I just see a standard datatable. Anyone know if there's a way to fix this?
Here's the Visualforce and CSS:
<style type="text/css"> p,#Opportunity{ font-size:1.0em; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; } #Opportunity,#Opportunity td, #Opportunity th,.tableHead, .tRowOdd,.tRowEven { border-collapse:separate; border-color:gray; border-spacing:0px; border-width:1px; border-style:outset; background-color: white; font-size:0.9em; } #Opportunity td, #Opportunity th,.tableHead, .tRowOdd,.tRowEven { padding:3px; border-style:inset; -moz-border-radius:3px; text-align:left; } .tRowEven { background-color:#FFF8DC; } #Opportunity th,.tableHead { background-color:#F7921E; } #Opportunity .OppName { text-align:center; } </style>
<apex:datatable styleClass="Opportunity" rowClasses="tRowOdd, tRowEven" headerClass="tableHead" value="{!relatedTo.OpportunityLineItems}" var="Oli" cellpadding="3" border="1"> <apex:column > <apex:facet name="header">Product</apex:facet> {!Oli.PricebookEntry.Name} </apex:column> <apex:column > <apex:facet name="header">Product Code</apex:facet> {!Oli.PricebookEntry.ProductCode} </apex:column> <apex:column > <apex:facet name="header">Quantity</apex:facet> {!Oli.Quantity} </apex:column> <apex:column > <apex:facet name="header">Sales Price</apex:facet> {!Oli.UnitPrice} </apex:column> <apex:column > <apex:facet name="header">Total Price</apex:facet> {!Oli.TotalPrice} </apex:column> </apex:dataTable>
Thanks for any help.
Steven
This will be down to your email client rather than Salesforce, I would imagine.
If you view the source of the message do you see your CSS entries? If so, then your email client may not support css in HTML emails.
All Answers
This will be down to your email client rather than Salesforce, I would imagine.
If you view the source of the message do you see your CSS entries? If so, then your email client may not support css in HTML emails.
Sorry I missed some detail out: I have another table in the email which I'm writing just in HTML and it uses the same inline CSS and comes through styled:
Uploaded with ImageShack.us
So it must be something specifically with Datatable :(
View the source for the email in your client and the preview on SFDC - that may help.
FWIW we found with tables inside PDFs that we had to use inline styles to get them to work, as the styleclasses didn't come through - might be worth trying something similar?
Well I've discovered I can get formatting to work in a sense by using inline css, but you dont appear to be able to format alternate columns differently (like you can with, say, rowClasses="tRowOdd,tRowEven") using inline.
Also you cannot format the heading with inline CSS anymore for some reason - you can only do that with a class so thats rubbish :(
I've discovered that the email does in fact render properly in Yahoo Mail and it is Outlook that sulks. I've decided to apply both Style="" and styleClass="" information so Outlook can display at least SOME formatting whilst the other browsers get it right.
Interesting article here, apparently it is caused by the fact Outlook now uses Word 2007 as it's rendering engine!! What on earth were they thinking :(
http://www.straightupsearch.com/archives/2008/01/microsoft_break.html
Thanks for your advice!
steven