How to align buttons vertically

Question

Hi guys I have a few radio buttons that I want vertical, but I can only seem to get the horizontal.

Currently my code is:

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

How can I change it from horizontal to vertical, I have tried the grid way but still the same.

Thanks guys

EDIT

i have now achieved what i set out :

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

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 ?

Answer 1

Use the layout attribute on p:selectOneRadio with value pageDirection.

Here are possible values for layout:

• lineDirection - For Horizontal Direction
• pageDirection - For Vertical direction.
• grid - For a grid pattern
• pageDirection - For Vertical direction.
• responsive - For dynamically using the space provided
• custom - For custom Layout.

Example