title: How to align buttons vertically
body: <p>Hi guys I have a few radio buttons that I want vertical, but I can only seem to get the horizontal.</p>
  
  <p>Currently my code is:</p>
  
  <pre><code>            &lt;p:panelGrid columns="1"&gt;
                  &lt;p:selectOneRadio id="options" value="{formBean.number}"&gt;  
                      &lt;f:selectItem itemLabel="0 - 19" itemValue="1" /&gt; 
                      &lt;!-- Add in the help button by the side of each item once its lined up, use a grid ?
                      &lt;p:button icon="ui-icon-help" title="Help"&gt;  
                      &lt;/p:button&gt; --&gt;
                      &lt;f:selectItem itemLabel="20 - 39" itemValue="2" /&gt;  
                      &lt;f:selectItem itemLabel="40 - 49" itemValue="4" /&gt;  
                      &lt;f:selectItem itemLabel="50 - 59" itemValue="5" /&gt;
                      &lt;f:selectItem itemLabel="60 - 69" itemValue="6" /&gt;  
                      &lt;f:selectItem itemLabel="70 - 79" itemValue="7" /&gt;  
                      &lt;f:selectItem itemLabel="80 - 100" itemValue="8" /&gt;  
                  &lt;/p:selectOneRadio&gt;  
              &lt;/p:panelGrid&gt;
  </code></pre>
  
  <p>How can I change it from horizontal to vertical, I have tried the grid way but still the same.</p>
  
  <p>Thanks guys</p>
  
  <p>EDIT</p>
  
  <p>i have now achieved what i set out :</p>
  
  <pre><code>            &lt;p:panelGrid columns="1"&gt;
                  &lt;p:selectOneRadio id="options" value="{formBean.number}" layout="grid" columns="1" required = "True"
                                requiredMessage="#{bundle.requiredGender}"&gt; 
                      &lt;f:selectItem itemLabel="0 - 19" itemValue="1" /&gt; 
  
                      &lt;f:selectItem itemLabel="20 - 39" itemValue="2" /&gt;  
                      &lt;f:selectItem itemLabel="40 - 49" itemValue="4" /&gt;  
                      &lt;f:selectItem itemLabel="50 - 59" itemValue="5" /&gt;
                      &lt;f:selectItem itemLabel="60 - 69" itemValue="6" /&gt;  
                      &lt;f:selectItem itemLabel="70 - 79" itemValue="7" /&gt;  
                      &lt;f:selectItem itemLabel="80 - 100" itemValue="8" /&gt;  
                  &lt;/p:selectOneRadio&gt;  
              &lt;/p:panelGrid&gt;
  </code></pre>
  
  <p>only issue is now the grid is the size of the page, any way this can be aligned to left and made only the size of the labes ?</p>