Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

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>
</ul>

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>
 </apex:dataList>

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>
    </li>
</ul>
share|improve this question
    
How about declare a style (like in css) and associate with li rather than using the vf attribute salesforce.com/us/developer/docs/pages/Content/… –  techtrekker Dec 31 '12 at 23:36
add comment

2 Answers

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>
    </apex:repeat>
</ul>

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="google.com">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
add comment

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>
        </li>
    </apex:repeat>
</ul>
share|improve this answer
add comment

Your Answer

 
discard

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.