Take the following example of a page and controller:
Page:
<apex:page showHeader="false" controller="LetterListController" standardStylesheets="false" sidebar="false">
<apex:dataList value="{!accounts}" type="a" var="account" id="theList" >
<apex:outputText value="{!account.name}"/>
</apex:dataList>
<ol type="a">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Last Item</li>
</ol>
</apex:page>
public class LetterListController {
List<Account> accounts;
public List<Account> getAccounts() {
if(accounts == null) accounts = [select name from account limit 10];
return accounts;
}
}
When the Letter List page is rendered in Salesforce, the following output appears-
Absolutely fine, but when we add the renderAs="pdf" attribute in the page tag definition, the PDF output is -
The apex datalist has been rendered as a list with blobs, while the html list has been changed to be ordered by numbers. This is quite frustrating, but the solution is simple. You can choose the bullet point class of a list using the css attribute list-style-type. So all we need to do is create a style class on the page inside head tags, and then apply this class to the two lists.
Page:
<apex:page showHeader="false" controller="LetterListController" standardStylesheets="false" sidebar="false" renderas="PDF">
<head>
<style>
.letterList{
list-style-type: lower-alpha;
}
</style>
</head>
<apex:dataList value="{!accounts}" var="account" id="theList" styleClass="letterList">
<apex:outputText value="{!account.name}"/>
</apex:dataList>
<ol class="letterList" type="a">
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Last Item</li>
</ol>
</apex:page>
The output PDF is now -
0 comments:
Post a Comment