Conditional Order of JSF Elements

Question

I have two JSF elements (eg, an input text, and an image). For some condition (eg, if a user is logged in), I want the input text to be rendered first. For the opposite condition (eg, the user is anonymous), I want the image to be rendered first. Is there a way to accomplish that (that can scale to more than just 2 elements)? The only idea I have, which looks hacky, is the following:

<h:inputText rendered=#{condition}/>
<h:graphicImage/>
<h:inputText rendered=#{!condition}/>

Answer 1

I would use CSS to solve this. Roughly it comes down to:

XHTML:

<div class="container input#{condition ? 'First' : 'Last'}">
    <h:inputText/>
    <h:graphicImage/>
</div>

CSS:

.container { overflow: auto; }
.container.inputFirst input { float: left; }
.container.inputLast input { float: right; }

Again, this is rough. It's just to give you an idea. Customize it to your needs. There are many ways in which you could style this.

If you want to use flex, try:

.container { display: flex; }
.container.inputLast { flex-direction: row-reverse; }