function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
LoneStar69LoneStar69 

How to align text under radio buttons

Hello Friends,

This might be very simple but unable to get this done!
I have a series of radio buttons on a vf page like this

User-added image

I want text to show up below each radio button. Something like this -
User-added image
Appreciate your help!
Best Answer chosen by LoneStar69
sfdcMonkey.comsfdcMonkey.com
hi try this
 <style>
    .radioinput input[type="radio"]{float:bottom;}
    .radioinput label{display:block;}
    </style>


page

 <apex:selectRadio value="" styleClass="radioinput">
            <apex:selectOptions value="{!items}"/>
            </apex:selectRadio><p/>

Thanks
mark it best answer if it helps you :)

All Answers

sfdcMonkey.comsfdcMonkey.com
hi try this
 <style>
    .radioinput input[type="radio"]{float:bottom;}
    .radioinput label{display:block;}
    </style>


page

 <apex:selectRadio value="" styleClass="radioinput">
            <apex:selectOptions value="{!items}"/>
            </apex:selectRadio><p/>

Thanks
mark it best answer if it helps you :)
This was selected as the best answer
LoneStar69LoneStar69
Hi There,

Apprecaite your quick response, almost there.

Right now it looks like this... can it be tweaked more?

User-added image

Thanks for your help!
sujitha Ramachandrunisujitha Ramachandruni
<apex:page controller="radio" >
<apex:form >
  <b><style>
 
  .radioinput input[type="radio"]{float:bottom;}
   .radioinput label{display:block;}
 
  </style></b>
 
 
  <apex:selectRadio value="{!searchCategory}" styleClass="radioinput" style="width:350px;" layout="lineDirection" id="theRadio" >
 
 
 <apex:selectOption itemValue="Accepted" itemlabel=" clear"  />
 <apex:selectOption itemValue="Declined" itemlabel=" not clear"/>
 <apex:selectOption itemValue="Very Clear" itemlabel=" Very Clear"/>
 
  </apex:selectRadio>
  </apex:form>
</apex:page>


 
sfdcMonkey.comsfdcMonkey.com
hi LoneStar
you can give margin on bottom of radio
use thiis
.radioinput input[type="radio"]{float:bottom;margin-top:8px}

adjust it as you want
thanks
mark it best answer if it helps you so it make proper solustion for others :)
LoneStar69LoneStar69
Thanks again!

Appreciate your response Sujitha.
LoneStar69LoneStar69
Guys,
How can i align text on the top of the radio buttons instead of the bottom?
Appreciate your help!