Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I cannot set the 'li' style anyone knows why?

I have this original code

<ul class="unCollapsableSideBarList">
    <li class="sideBarListLink"><a href="#">aaaaa</a></li>
    <li class="sideBarListLink"><a href="#">bbbbb</a></li>

I made it dynamic and replaced it with:

<apex:dataList value="{!products}" var="product" styleClass="SideBarList">
     <apex:outputLink value="myPage?id={!product.Id}" styleClass="sideBarListSelected">{!product.Name}</apex:outputLink>

The 'ul' style is set as expected but the 'li' is not This is what I see (the li has no class) in the page source (I removed the ids because they are very long):

<ul class="unCollapsableSideBarList">
    <li class="">
    <a href="PortfolioCatalogDetails?id=a00d0000008PJEkAAO" class="sideBarListLink sideBarListSelected_product">aaa</a>
share|improve this question
How about declare a style (like in css) and associate with li rather than using the vf attribute… – techtrekker Dec 31 '12 at 23:36
up vote 2 down vote accepted

apex:dataList doesn't appear to have any attributes that let you control the li tags it renders.

Alternative 1

Use the apex:repeat tag to create the list instead. For example:

<ul class="sideBarList">
    <apex:repeat value="{!products}" var="product">
        <li class="sideBarListLink"><a href="#">aaaaa</a></li>

Alternative 2

If you insist on using apex:datalist, you can still style the li tags with CSS as such:

.sidebarList li {
    // css for li
share|improve this answer
<apex:repeat value="{!products}" var="product"> <a href="">aaaaa</a> </apex:repeat> I'm getting the values double time.Don't know why.Can u help me in this – Eagerin Sf Feb 1 '13 at 8:14
Let's see what your VF page markup looks like. – jmrjulian Feb 1 '13 at 17:06

It's not possible to set the style of the li tag rendered by the <apex:dataList /> component using native tag attributes, as you've seen.

In the style markup you can target the element using a parent/child declaration rather than targeting the li element itself.

Like so: ul.unCollapsableSideBarList li { font-weight: bold; }

Alternatively, you can use a repeat tag instead of the dataList to create the unordered list markup, which will allow you to render absolutely anything you'd like.

<ul class="unCollapsableSideBarList">
    <apex:repeat value="{!products}" var="product">
        <li class="sideBarListLink">
            <apex:outputLink value="myPage?id={!product.Id}">{!product.Name}</apex:outputLink>
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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