[SalesForce] Radio button – visualforce

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>

Best Answer

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: enter image description here Did you consider changing radio layout attribute to "pageDirection" instead?

Related Topic