I just inherited a project implemented in JSF. I have the following code which looks fine in Chrome, but Firefox renders the borders on the "empty" list items:
<ul>
<li><a href="/home">Home</li>
<li>
<s:link view="/signup.xhtml" rendered="#{someCondition}">Sign Up</s:link>
</li>
<!-- etc... -->
</ul>
Which ends up looking like:
Is there a JSF tag to conditionally render the <li>
?
If you do it as in @CoolBeans example, you will get a <span> around your <li>. In some cases it might disrupt your layout, besides you don't really want an extra tag under <ul>. To get rid of it, use <ui:fragment rendered="#{condition}" />
around your item instead of <h:panelGroup>.
Also you can use style attribute to hide an item:
<li style="display: #{condition ? 'list-item' : 'none'};" />
No li
is vanilla html, not a jsf component.
You can hack it by putting a <h:panelGroup />
around the li
element and setting the rendered
property on it.
ie.
<h:panelGroup rendered="#{someCondition}">
<li>
<s:link view="/signup.xhtml">Sign Up</s:link>
</li>
</h:panelGroup>
Another option is to use <f:verbatim rendered="#{someCondition}" >
, but keep in mind that it has been deprecated in JSF 2.0.
You could also use the core JSTL library:
<c:if test="#{someCondition}">
<li>
<s:link view="/signup.xhtml">Sign Up</s:link>
</li>
</c:if>
I think using this core tag makes the code easier to understand than using the panelGroup tag.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With