function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ed055Ed055 

Aligning radio button in VF page

I'm not sure how to align the radio button text. My VF code and the output are as below . The itemlable text aligns under the radio button if its too long. I need text to align under text and  not under radio button. Any suggestions ?

Thanks.
  
<apex:selectRadio value="{!searchCategory}"  style="width:350px;" layout="pageDirection" id="theRadio" >
    <apex:selectOption itemValue="Accepted" itemlabel=" I acceptI acceptI acceptI acceptI acceptI acceptI acceptI acceptI acceptI acceptI accept"  />
    <apex:selectOption itemValue="Declined" itemlabel=" I decline this invitation"/>
     
</apex:selectRadio>
User-added image
 
Best Answer chosen by Ed055
Chamil MadusankaChamil Madusanka
<style>
    .radioinput input[type="radio"]{float:left;}
    .radioinput label{display:block;}
    </style>

<apex:selectRadio value="{!searchCategory}" styleClass="radioinput"  style="width:350px;" layout="pageDirection" id="theRadio" >
    <apex:selectOption itemValue="Accepted" itemlabel=" I acceptI acceptI acceptI acceptI acceptI acceptI acceptI acceptI acceptI acceptI accept"  />
    <apex:selectOption itemValue="Declined" itemlabel=" I decline this invitation"/>
     
</apex:selectRadio>
Try this code with the custom style.

All Answers

Chamil MadusankaChamil Madusanka
<style>
    .radioinput input[type="radio"]{float:left;}
    .radioinput label{display:block;}
    </style>

<apex:selectRadio value="{!searchCategory}" styleClass="radioinput"  style="width:350px;" layout="pageDirection" id="theRadio" >
    <apex:selectOption itemValue="Accepted" itemlabel=" I acceptI acceptI acceptI acceptI acceptI acceptI acceptI acceptI acceptI acceptI accept"  />
    <apex:selectOption itemValue="Declined" itemlabel=" I decline this invitation"/>
     
</apex:selectRadio>
Try this code with the custom style.
This was selected as the best answer
Amit Kumar 204Amit Kumar 204

<style>
.one td input[type="radio"]{
    float: left;
 }
 </style>


<apex:selectRadio styleClass="one" value="{!searchCategory}"  style="width:350px;" layout="pageDirection" id="theRadio" >
    <apex:selectOption itemValue="Accepted" itemlabel=" I acceptI acceptI acceptI acceptI acceptI acceptI acceptI acceptI acceptI acceptI accept"  />
    <apex:selectOption itemValue="Declined" itemlabel=" I decline this invitation"/>
     
</apex:selectRadio>

Try above code it will solve your issue.