How to align buttons vertically
css, html, jsf, primefaces, xhtml
Solution
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
Problem
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 ?