How to hide elements in JSF?

Question

Is it possible to hide div , etc. based on the condition (for example, in the rendered attribute with EL) without having to wrap it in <h:panelGrid ...> etc. using the rendered attribute? This ruins my layout. I just need this for logic, not for layout.

Answer 1

first of all, you should not wrap your elements with h:gridPanel , which leads to an html table

instead, you should enclose with h:panelGroup , which leads to span in the html code, you can also add layout="block" to h:panelGroup to make it display as a div

second you don't use jstl when hiding a div instead do something like this

 <div style="display:#{(myBean.hideSomeDiv)?'none':'block'}">My Div Content</div> 

or

 <h:panelGroup styleClass="#{(myBean.hideSomeDiv)?'hide':''">My Span Content</h:panelGroup> 

where in the css file add this:

 .hide { display: none; } 

INMO , you always better hide in JSF with rendered="#{myBean.renderCondition}"

Take a look at BalusC here Conditionally Showing JSF Components

Answer 2

You could just do this:

 <div style="display:#{yourBean.property}"></div> 

If yourBean.property returns 'none' to hide the div

Answer 3

For me, it just works without parentheses in the condition, for example:

 <div style="display:#{!isDisplayed ? 'none' : 'block'}">My Div Content</div> 

or

 <h:panelGroup styleClass="#{!isDisplayed ? 'hide' : ''}">My Span Content</h:panelGroup>