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, 2015 at 18:54
  • But First one is not showing alternate colours and second one is showing alternate colours
    – javanoob
    Aug 10, 2015 at 18:55

1 Answer 1

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, 2015 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, 2015 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, 2015 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, 2015 at 4:31

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .