Horizontal placement of components in JSF

Question

Should be simple but I couldn\'t find the answer, I would like to place components horizontally instead of vertically.

What I\'m trying to achieve is a rich:toolbar

Answer 1

You probably already know that JSF in webserver ends up as HTML in webbrowser. In HTML, there are several ways to place elements horizontally (eventually with help of CSS):

1. Group them in inline elements (like <span> or any element with display: inline;).
2. Group them in block elements (like <div> or any element with display: block;) and give them all a float: left;.

The JSF <h:panelGrid> renders a HTML <table> element wherein each child component is taken as a <td>. The columns attribute represents the max amount of <td> elements in a single <tr> (so that the <h:panelGrid> knows when to put a </tr><tr> in). The JSF <h:panelGroup> renders a <span> element.

To achieve way 1 with JSF, you just need to group them in separate <h:panelGroup> components.

<rich:toolbar ...>
    <h:panelgroup id="row1" ... />
    <h:panelgroup id="row2" ... />
</rich:toolbar>

Way 2 can be done the same way, but then with <h:panelGroup layout="block"> instead and a float: left; in their CSS.