Message after SelectOneRadio moved to next line

[Bill Zelan]

We are experiencing the problem that a <h:message/> placed after a <h:selectOneRadio/> will always be placed on the next line, rather than one the same line (as with all the other components). In our design, all error messages are placed directly to the right of the corresponding field. The fact that radio buttons behave differently is somewhat confusing for our users. Consider the following example:

    <h:panelGrid columns="2">

        <h:selectOneRadio id="radio">
            <f:selectItem itemValue="T" itemLabel="Yes" />
            <f:selectItem itemValue="F" itemLabel="No" />
        </h:selectOneRadio>
        <h:message for="radio" styleClass="error"/>

    </h:panelGrid>

The selectOneRadio automatically creates a table, and in HTML anything that is placed after a table is automatically moved to a new line. I tried changing the style class "error" for the message by toying with the CSS options float and clear, but to no avail.

Does anyone have any idea how I can change this behaviour? Preferably, I am looking for a solution in CSS, where I can change the CSS properties of either the table (created by the selectOneRadio) or the message.

[Jason Irwin]

I've not tried it, but could this work?

<h:panelGrid columns="2" border="0">
    <h:selectOneRadio id="radio">
        <f:selectItem itemValue="T" itemLabel="Yes" />
        <f:selectItem itemValue="F" itemLabel="No" />
    </h:selectOneRadio>

    <h:message for="radio" styleClass="error"/>
</h:panelGrid>

[Bill Zelan]

Jason Irwin wrote:I've not tried it, but could this work?

Actually, that's the way the code works now. I have updated my code sample to reflect this.

The panelGrid translates into a table and within the TD of that table, the message is always below (and not aside) the selectOneRadio.

[Bill Zelan]

We ultimately solved this by adding the CSS style "float: left;" to the selectOneRadio.