[SalesForce] Show a components of div tag based on condition

Hi Friends my second question here, got an excellent answer for the first one:

I have displayed a div tag as below:

<div class='tabHeaderSection cb'>           
    <ul>
        <li >My Development </li>
        <li>Impact </li>
        <li>Events</li>
        <li >Marketplace </li>
        <li>Payment Notification </li>                 
</div>

Now i want payment notification to be shown based on one condition, so I kep it in outputpanel and rendered as below:

<div class='tabHeaderSection cb'>           
    <ul>
        <li >My Development </li>
        <li>Impact </li>
        <li>Events</li>
        <li >Marketplace </li>
    <apex:outputPanel rendered="{!IF(contactstatus=='Offered AFL - awaiting response',TRUE,FALSE)}" styleclass="tabHeaderSection cb">               

        <li>Payment Notification </li> 

       </apex:outputpanel>                      
        </ul>
    <span class='cb'></span>
</div>

But the problem here is when I keep outputpanel inside div tag all the styling used in div class is gone – I need both styling form div tag and render based on one condition. How is that possible??
Waiting for your reply guys…

Best Answer

An apex:outputPanel by default is rendered as a <div>, so that messes up your unordered list. It can also be rendered as a <span> or, under some conditions without an html element. This can be controlled with the layout attribute. Use layout="block" for a <div>, layout="inline" for a <span> or layout="none" for nothing. See the documentation of the outputpanel, specifically the "layout" part of the attribute section. Note that there are some side-effects of unrendered outputpanels with layout="none".

Related Topic