+ Start a Discussion
ministe2003ministe2003 

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

 

Best Answer chosen by Admin (Salesforce Developers) 
bob_buzzardbob_buzzard

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

bob_buzzardbob_buzzard

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.

This was selected as the best answer
ministe2003ministe2003

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 :(

bob_buzzardbob_buzzard

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?

ministe2003ministe2003

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 :(

ministe2003ministe2003

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