Aligning Radio Button в JSP/JSF с этикеткой

Question

Я хотел бы, чтобы достичь следующего в JSF1.1 среде:

Пол: RadioButtonForFemale ЖЕНСКИЙ 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> 

В принципе, все радио кнопка должна быть в той же строке, что и маска (Пол в нашем случае).

Прилагается мой текущий код. переключатель появится в следующей строке. Моя панель имеет 1 столбец.

спасибо,

Answer 1

Действительно, <h:selectOneRadio> генерирует <table>, который по умолчанию используется HTML block element (т.е. всегда начинается с новой строки).

Вам необходимо установить свойство CSS display в значение 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> 

Но это довольно неуклюжий. Если вы уже используете <h:panelGrid>, я бы рекомендовал просто установить его columns на 2, чтобы вы могли иметь метки в левом столбце и входы в правом столбце.

<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>