1

I have visualforce page render as pdf.I want to put bullet.The bullet works well in web but not display in pdf.

<apex:page controller="MyController" renderAs="pdf" applyBodyTag="false">
    <head>
         <style>
         ul.bulletgreen li{
             list-style-type: disc;
             font-size:60px;
             color:green;
         }
         </style>
    </head>
    <body>
        <table class="grey-table" cellspacing="0" width="100%" >
            <thead>
                <tr>
                   <th>Name</th>
                   <th>Position</th>
                   <th>Job Function</th>
                   <th>View of Company</th>
                </tr> 
            </thead>
            <tbody >
                <apex:repeat value="{!myList}" var="list" >
                    <tr>
                        <td>{!list.Name__c}</td>
                        <td>{!list.Position__c}</td>
                        <td>{!list.Salary__c}</td>
                        <td>
                            <ul class="bulletgreen">
                                <li >Test</li>
                            </ul>
                        </td>
                    </tr>
                </apex:repeat>
                <apex:outputPanel layout="none">
                    <tr><td colspan="4" align="center" >No Record(s) Found</td></tr>
               </apex:outputPanel>                      
            </tbody>
        </table>
    </body>
</apex:page>

Actually before I try for bullet, I also had try this. My objective is to get filled-circle icon, but it came out square.

.circle {
    width: 15px;
    height: 15px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    margin-right: 10px;
    display: inline-block;
}

How to render this circle filled with color in pdf? I tried bullet and css, any other ideas?

4

The PDF renderer has pretty poor support for certain areas of CSS, and I wouldn't be all that surprised if it didn't support list-style-type.

You may well have more luck just using putting a unicode bullet point in (the HTML &bull;should do it: •) into the start of each list item. This should still be able to get it's colour from the CSS class.

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.