2014-02-12 3 views
1

Привет, ребята У меня есть несколько переключателей, которые я хочу вертикально, но я могу видеть только горизонтальный.Как выровнять кнопки по вертикали

В настоящее время мой код:

  <p:panelGrid columns="1"> 
       <p:selectOneRadio id="options" value="{formBean.number}"> 
        <f:selectItem itemLabel="0 - 19" itemValue="1" /> 
        <!-- Add in the help button by the side of each item once its lined up, use a grid ? 
        <p:button icon="ui-icon-help" title="Help"> 
        </p:button> --> 
        <f:selectItem itemLabel="20 - 39" itemValue="2" /> 
        <f:selectItem itemLabel="40 - 49" itemValue="4" /> 
        <f:selectItem itemLabel="50 - 59" itemValue="5" /> 
        <f:selectItem itemLabel="60 - 69" itemValue="6" /> 
        <f:selectItem itemLabel="70 - 79" itemValue="7" /> 
        <f:selectItem itemLabel="80 - 100" itemValue="8" /> 
       </p:selectOneRadio> 
      </p:panelGrid> 

Как я могу изменить его от горизонтального до вертикального, я попытался путь к сетке, но все та же.

Спасибо ребята

EDIT

я теперь достиг того, что я отправился:

  <p:panelGrid columns="1"> 
       <p:selectOneRadio id="options" value="{formBean.number}" layout="grid" columns="1" required = "True" 
           requiredMessage="#{bundle.requiredGender}"> 
        <f:selectItem itemLabel="0 - 19" itemValue="1" /> 

        <f:selectItem itemLabel="20 - 39" itemValue="2" /> 
        <f:selectItem itemLabel="40 - 49" itemValue="4" /> 
        <f:selectItem itemLabel="50 - 59" itemValue="5" /> 
        <f:selectItem itemLabel="60 - 69" itemValue="6" /> 
        <f:selectItem itemLabel="70 - 79" itemValue="7" /> 
        <f:selectItem itemLabel="80 - 100" itemValue="8" /> 
       </p:selectOneRadio> 
      </p:panelGrid> 

Единственная проблема сейчас сетка размер страницы, каким-либо образом это может быть выровнен налево и делали только размеры лаб?

+0

Попробуйте обернуть каждое радио в блочном элементе, таком как div или p или label. – dward

+0

Ну, это не совсем html, поскольку вы использовали теги, можете ли вы скопировать html и CSS на скрипку? – Nix

ответ

3

Используйте атрибут layout на p:selectOneRadio как pageDirection.

Есть 3 возможных значения для layout:

  • lineDirection - для горизонтального направления
  • pageDirection - для направления по вертикали.
  • custom - Для пользовательских макетов. Example
Смежные вопросы