2

I am creating custom quote PDF and trying to apply alternating colours for the Product Line table and here is the code that I am using:

This below code, does not show alternating colours.

<apex:page controller="QuotePDFCustomController" renderas="pdf" applyBodyTag="false">

    <head>    
        <style type="text/css" media="print">
            .productTableClass tbody tr:nth-child(odd){ 
                background: #7CFC00;
            }
            .productTableClass tbody tr:nth-child(even){
                background: #FFD700;
            }
        </style>
    </head>

    <table style="width: 100%; font-size: 13px; margin-bottom: 20px;" class="productTableClass">
        <thead>
            <tr style="color: #fff; background: #808080; font-weight: bold; font-family: Arial;">
                <th>Product Name</th>
            </tr>
        </thead>
        <tbody>
            <apex:repeat value="{!qliListObj}" var="line">
                <tr>
                    <td>{!line.PricebookEntry.Product2.Name}</td>
                </tr>
            </apex:repeat>
        </tbody>
    </table>
</apex:page>

But when I tried the below code, it works perfectly fine and shows the alternating colours:

<apex:page standardController="Account">

    <style type="text/css">
        .productTableClass tbody tr:nth-child(odd){ 
            background: #7CFC00;
        }
        .productTableClass tbody tr:nth-child(even){
            background: #FFD700;
        }
    </style>

    <table border="0" class="productTableClass">
        <thead>
            <tr>
                <th>Case Number</th>
            </tr>            
        </thead>
        <tbody>
            <apex:repeat var="cases" value="{!Account.Cases}">    
                <tr>    
                    <td>{!cases.CaseNumber}</td>       
                </tr>    
            </apex:repeat> 
        </tbody>
    </table>
</apex:page>

Why is apex:repeat not applying alternate colors when used in PDF media??

2
  • First one should work and second one shouldn't. – Ashwani Aug 10 '15 at 18:54
  • But First one is not showing alternate colours and second one is showing alternate colours – javanoob Aug 10 '15 at 18:55
1

Salesforce PDF engine do not support all CSS3 tags. AS tr:nth-child nee d CSS3 support, that's why it is not working. You can use <apex:variable tag to generate the same result. Here is a working example.

VF Page

<apex:page controller="AlternateRow" showHeader="false" sidebar="false" renderas="pdf" applyBodyTag="false">
    <table>
        <apex:variable var="trcolor" value="red"/>
        <apex:repeat value="{!data}" var="row">
            <tr style="background-color: {!trcolor}"><td>{!row}</td></tr>
            <apex:variable var="trcolor" value="{!IF(trcolor == 'red', 'blue', 'red')}"/>
        </apex:repeat>
    </table>
</apex:page>

Controller

public class AlternateRow {
    public String[] Data {
        get {
            return new String[] {'Apple', 'Banana', 'Cherry', 'Watermelon'};
        }
    }    
}
4
  • @javanoob If my solution answers your question, can you please mark it as answer. Thanks. – Saroj Bera Aug 10 '15 at 20:27
  • Hi Saroj - as point of SFSE forum etiquette, unlike SFDC Dev Forum, we avoid prompting OP to upvote or mark as solution. – cropredy Aug 10 '15 at 21:35
  • Hi Eric - thanks for letting me know the forum etiquette. Sometimes people forget to mark the answers and I believe marking answers will help others to know that this is the correct solution for above issue. – Saroj Bera Aug 11 '15 at 3:26
  • Saroj - you are of course right that getting answers acknowledged as the solution is desirable; just that this forum's approach is different than SF Dev Forum. For background, you might want to read here: meta.salesforce.stackexchange.com/a/1996/2602 – cropredy Aug 11 '15 at 4:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.