1

I have a group of radio buttons that display like A, but I need it to display like B.

Currently my code is:

<apex:selectRadio styleClass="w-100" value="{!selectedValue}" layout="pageDirection">
    <apex:selectOptions value="{!values}"></apex:selectOptions>
    <apex:actionSupport action="{!randomAction}" event="onchange" reRender="randomDiv" oncomplete="RunScript();"/>
</apex:selectRadio>

I tried diving the selectedValue list into two lists, one for even numbers and another one for odd numbers, but it wasn't working either, maybe because both had the same value="{!selectedValue}"?

Currently displays like A, but I need it to display like B

2 Answers 2

0

@gyau The below code should work the way you wanted. Btw, i used country names but feel free to change the code you want. The below code will work for both layout direction pageDirection and lineDirection.

Let me know if it helps!

Visualforce Page:

<apex:page controller="sampleCon" name="VFSelectRadioPage">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var td = $(".apexSelectRadio td");
            td.each(function(i){
                if (i % 2 == 0) {
                    td.slice(i, i+2).wrapAll('<tr/>')
                }
            }).parent('tr').unwrap();
        });
    </script>
    <apex:form id="radioOptionsForm">
        <apex:selectRadio value="{!country}" layout="lineDirection" id="radioOptions" styleClass="apexSelectRadio">
            <apex:selectOptions value="{!items}"/>
        </apex:selectRadio>
    </apex:form>
</apex:page>

Apex controller:

public class sampleCon {
    String country = null;
         
    public PageReference test() {
        return null;
    }
                
    public List<SelectOption> getItems() {
        List<SelectOption> options = new List<SelectOption>(); 
        options.add(new SelectOption('India','India')); 
        options.add(new SelectOption('Australia','Australia')); 
        options.add(new SelectOption('Singapore','Singapore')); 
        options.add(new SelectOption('New Zealand','New Zealand')); 
        options.add(new SelectOption('Malaysia','Malaysia')); 
        options.add(new SelectOption('Indonesia','Indonesia')); 
        options.add(new SelectOption('Canada','Canada')); 
        options.add(new SelectOption('Mexico','Mexico')); return options; 
    }
                   
    public String getCountry() {
        return country;
    }
                    
    public void setCountry(String country) { this.country = country; }
}

enter image description here

1
  • Thank you! Yesterday I ended up using layout="pageDirection" and using CSS. I will post my solution.
    – kiwi
    Jul 2, 2021 at 3:48
0

I solved it by using the following code:

Visualforce:

<apex:selectRadio styleClass="w-100 formatTable" value="{!selectedValue}" layout="pageDirection">
    <apex:selectOptions value="{!values}"></apex:selectOptions>
    <apex:actionSupport action="{!randomAction}" event="onchange" reRender="randomDiv" oncomplete="RunScript();"/>
</apex:selectRadio>

The w-100 class in the Visualforce code comes from bootstrap. It's equivalent to width: 100%

CSS:

.formatTable tr{
    display: inline-block;
    width: 50% ;
    padding: 2px 0;
}
            
.formatTable td{
    vertical-align: middle;
    display: block;
}
1
  • Did not know that you were planning to use bootstrap. Thanks for letting me know. Good luck! Jul 2, 2021 at 4:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .