Aligning Radio Button in a JSP/JSF with its label - jsf

Question

I would like to achieve the following in a JSF1.1 environment:
Gender: RadioButtonForFemale FEMALE RadioButtonForMale MALE
<h:panelGroup>
<h:outputLabel for = "searchSex" value = "#{bundle.Sex_Label}" style ="width:15%;">
</h:outputLabel>
<h:selectOneRadio id="searchSex" value="#{yy.search_Sex}" style="verticle-align:top;font-size:95%;color:red;">
<f:selectItem itemLabel="F" itemValue="F" />
<f:selectItem itemLabel="M" itemValue="M"/>
</h:selectOneRadio>
</h:panelGroup>
Basically, all the radio button should be in the same row as the lable (Gender in our case).
Attached is my current code. the radio button appear in the next row. My PanelGrid has 1 column.
thanks,

Answer 1

Indeed, the <h:selectOneRadio> generates a <table> which is by default a HTML block element (i.e. always starts at a new line).
You'd need to set the CSS display property to inline-table.
<h:panelGroup>
<h:outputLabel for="searchSex" value="#{bundle.Sex_Label}" style="width: 15%;" />
<h:selectOneRadio id="searchSex" value="#{yy.search_Sex}" style="display: inline-table; verticle-align: top; font-size: 95%; color: red;">
<f:selectItem itemLabel="F" itemValue="F" />
<f:selectItem itemLabel="M" itemValue="M" />
</h:selectOneRadio>
</h:panelGroup>
But this is pretty clumsy. If you're already using a <h:panelGrid>, I'd recommend to just set its columns to 2 so that you can have labels in left column and inputs in right column.
<h:panelGrid columns="2">
<h:outputLabel for="searchSex" value="#{bundle.label_sex}" />
<h:selectOneRadio id="searchSex" value="#{yy.searchSex}">
<f:selectItem itemLabel="F" itemValue="F" />
<f:selectItem itemLabel="M" itemValue="M" />
</h:selectOneRadio>
<h:outputLabel for="somethingElse" value="Something else" />
<h:inputText id="somethingElse" value="#{yy.somethingElse}" />
...
</h:panelGrid>