JSF selectOneRadio indentation

Question

Is there anyway to indent a set of radio buttons? I want it to look like the following:

o Item 1
o Item 2
    o Item 2.1
    o Item 2.2
o Item 3

I tried just applying a style to it but it doesn't work.

<style>
    .indent {
        text-indent: 3em;
    }
</style>

<p class="indent">test</p>

<h:selectOneRadio layout="pageDirection" value="#{myBean}">
    <f:selectItem itemValue="1" itemLabel="Item 1" />
    <f:selectItem itemValue="2" itemLabel="Item 2" />   <!-- also okay if item 2 is not selectable and item 2.1 and 2.2 are -->
    <p class="indent">
        <f:selectItem itemValue="2.1"  itemLabel="Item 2.1" />
        <f:selectItem itemValue="2.2" itemLabel="Item 2.2" />
    </p>
    <f:selectItem itemValue="3" itemLabel="Item 3" />
</h:selectOneRadio>

Answer 1

Have you tried adding a margin instead of indent?

.myIndent { 
    margin-left: 3em; 
} 

Have a look at http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ as well, they cover radio button styling.

Answer 2

I guess you want to display your radio buttons as a list. Add the layout attribute with pageDirection value to the <h:selectOneRadio /> tag component to achieve it:

<h:selectOneRadio layout="pageDirection" value="#{myBean}">
    <!-- your items go here... -->
</h:selectOneRadio>