Radio button - visualforce

Question

I have a question regarding radio button in Visualforce page, Is it possible to have the value of the button below the circle ?

o
option n°1

instead of

o option n°1

Many thanks

                        <div id="row">
                            <apex:selectRadio rendered="{!qPreview.renderSelectRow}" value="{!qPreview.selectedOption}">
                                <apex:selectOptions value="{!qPreview.rowOptions}"/>
                            </apex:selectRadio>
                        </div>    

Answer 1

Have you tried display:block?

E.g.:

<apex:page >
<style type="text/css">
#myRadio label { display:block; }
</style>
<div id="myRadio">
 <apex:form >
    <apex:selectRadio >
        <apex:selectOption itemValue="red" itemLabel="Red" id="redOption"/>
        <apex:selectOption itemValue="blue" itemLabel="Blue" id="blueOption"/>
    </apex:selectRadio>
 </apex:form>
</div>     
</apex:page>

upd it works for me with selectOptions from controller as well but is not very pretty: Did you consider changing radio layout attribute to "pageDirection" instead?

Answer 2

To do this, I think you need to let go of apex:selectOptions.

Check: http://www.eltoro.it/ArticleViewer?id=a07A000000NPRidIAH

In the second section of the above article, they create a custom radiobutton list with label behind it.