Apex Code Development You need to sign in to do that
Don't have an account?
Swamy P How to display radio buttons with images and the text in visualforce page
Hello Folks,
I want to display radio buttons along with images and text. I was trying to implement by selectoptions but it was showing a simple text with radio buttons. Please check the image.
How can i achieve this? Is it by Wrapper class or any functionality? If you know the solution for this, please drop me your idea with a snippet of code
I want to display radio buttons along with images and text. I was trying to implement by selectoptions but it was showing a simple text with radio buttons. Please check the image.
How can i achieve this? Is it by Wrapper class or any functionality? If you know the solution for this, please drop me your idea with a snippet of code
You can achive this with the help of HTML. I have written some sample snippet for you. Please check it.
VF Page:
<apex:page> <style> .main_div{float:left;width:100%} .inner_div{float:left;width:100%} .span_class{margin-right: 10px} .text_margin{mar} </style> <apex:form> <div class="main_div"> <div class="inner_div"> <span class="span_class"> <input type="radio" name="sex" value="male">Male </soan> <span class="span_class"> <img src="[Image_path]" alt="Smiley face" > </soan> <span> [Discription of radio button] </soan> </div> </div> </apex:form> </apex:page>You should copy the " inner_div" HTML to build the more blocks of same UI.
Please mark as best answer if it helps you.
Thanks,
Mudit
Its perfectly alright but i was not able to adjust thier heights, i.e, i want all of them are in same height as like in above image (First post image).
I tried below code, see the result in the shared screenshot. I want all of them are in same order and the text has to display in the same column, but some text coming as next line. Will you suggest me, where i need to change?
Code:
<apex:page >
<style>
.main_div{float:left;width:100%}
.inner_div{float:left;width:100%}
.span_class{margin-right: 10px}
.hght_class{margin-top:50px;}
</style>
<apex:form >
<apex:pageBlock title="Select Priority">
<apex:pageBlockSection>
<div class="main_div">
<div class="inner_div">
<span class="span_class">
<input type="radio" name="medium" value="medium"></input>
</span>
<span class="hght_class">
<img src="{!$Resource.Medium_Icon}" alt="Smiley face" style="margin-top:30px;"/>
</span>
<span class="span_class">
<b>Medium - Standard case priority.</b><br/>Initial response in 48hrs. Average completion time is less than 10 days.
</span>
</div>
<div class="inner_div">
<span class="span_class">
<input type="radio" name="high" value="high"></input>
</span>
<span class="hght_class">
<img src="{!$Resource.High_Icon}" alt="Smiley face"/>
</span>
<span class="span_class">
<b>High</b><br/>Initial response in 48hrs. Average completion time is less than 10 days.
</span>
</div>
<div class="inner_div">
<span class="span_class">
<input type="radio" name="low" value="low"></input>
</span>
<span class="hght_class">
<img src="{!$Resource.Low_Icon}" alt="Smiley face"/>
</span>
<span class="span_class">
<b>Low</b>
</span>
</div>
</div>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
I have done some changes in your code to make the UI same as you mentioned in the description. Please see the code.
<apex:page > <style> .main_div{float:left;width:100%} .inner_div{float:left;width:100%; padding:10px 0px;} .span_class{float:left;margin-right: 10px} </style> <apex:form > <apex:pageBlock title="Select Priority"> <apex:pageBlockSection> <div class="main_div"> <div class="inner_div"> <span class="span_class"> <input type="radio" name="medium" value="medium"></input> </span> <span class="span_class"> <img src="{!$Resource.Medium_Icon}" alt="Smiley face" /> </span> <span class="span_class"> <b>Medium - Standard case priority.</b><br/>Initial response in 48hrs. Average completion time is less than 10 days. </span> </div> <div class="inner_div"> <span class="span_class"> <input type="radio" name="high" value="high"></input> </span> <span class="span_class"> <img src="{!$Resource.High_Icon}" alt="Smiley face"/> </span> <span class="span_class"> <b>High</b><br/>Initial response in 48hrs. Average completion time is less than 10 days. </span> </div> <div class="inner_div"> <span class="span_class"> <input type="radio" name="low" value="low"></input> </span> <span class="span_class"> <img src="{!$Resource.Low_Icon}" alt="Smiley face"/> </span> <span class="span_class"> <b>Low</b> </span> </div> </div> </apex:pageBlockSection> </apex:pageBlock> </apex:form> </apex:page>Please mark as best answer if it helps you.
Thanks,
Mudit
Its looking good compared to earlier but only the change is image is coming in small size and the "text" is coming in next lines, how can i fix these? Rest all are perfect
Thanks Mudit :)
You must know about the basic of HTML to resolve this kind of issue. Please follow the link below for learn HTML basic.
LINK: http://www.w3schools.com/html/
Please mark as best if it helps you.
Thanks,
Mudit