0

I'm trying to achieve below layout.

enter image description here

Below is my code (with 2 approaches) on VF page.

<apex:page lightningStylesheets="true" applyHtmlTag="true" >
    <apex:includeLightning />
    <apex:slds />

    <apex:form>
        <b>1st Approach</b><br/>

        <apex:selectRadio layout="PageDirection">
            <fieldset class="slds-form-element slds-form-element_compound">
                <div class="slds-form-element__control">
                    <div class="slds-form-element__row">
                        <div class="slds-size_1-of-2">
                            <div class="slds-form-element">
                                <div class="slds-form-element__control">
                                    <apex:selectOption itemValue="1" title="1st Radio button" itemLabel="test1"/>
                                </div>
                                <div class="slds-form-element__control">
                                    <apex:selectOption itemValue="2" title="1st Radio button" itemLabel="test2"/>
                                </div>

                            </div>
                        </div>
                        <div class="slds-size_1-of-2">
                            <div class="slds-form-element">
                                <div class="slds-form-element__control">
                                    <input type="text" id="input-01" class="slds-input" />
                                </div>
                                <div class="slds-form-element__control">
                                    <input type="text" id="input-02" class="slds-input" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </apex:selectRadio>

        <br/><hr/><br/>

        <b>2nd Approach</b><br/>

        <apex:selectRadio layout="PageDirection">
            <div class="slds-grid">
                <div class="slds-col">
                    <apex:selectOption itemValue="3" itemLabel="option 3"/>
                </div>
                <div class="slds-col"><apex:inputText styleClass="slds-input"/></div>
            </div>
            <div class="slds-grid">
                <div class="slds-col">
                    <apex:selectOption itemValue="4" itemLabel="option 4"/> 
                </div>
                <div class="slds-col"><apex:inputText styleClass="slds-input"/></div>
            </div>

        </apex:selectRadio>
    </apex:form>
</apex:page>

Resulting output as below:

Resulting Page

I'm trying to create this layout with < apex:selectRadio >. Appreciate any help/thoughts to get this corrected. Thanks.

1

Please try below and fix the margin and size as per your need

<apex:page lightningStylesheets="true" applyHtmlTag="true" >
    <apex:includeLightning />
    <apex:slds />

    <apex:form>
        <div class="slds-box slds-size_1-of-6 slds-m-left_xx-large slds-m-top_large" >
            <div class="slds-grid slds-gutters">
                <div class="slds-col slds-size_2-of-3">
                    <span><input type="radio" name="radio"/> </span>
                    <span class="slds-m-left_small"> Option 1 </span>
                </div>
                <div class="slds-col slds-size_1-of-3">
                    <span><input type="text"/></span> 
                </div>
            </div>
            <div class="slds-grid slds-gutters slds-m-top_small">
                <div class="slds-col slds-size_2-of-3">
                    <span><input type="radio" name="radio"/> </span>
                    <span class="slds-m-left_small"> Option 2 </span>
                </div>
                <div class="slds-col slds-size_1-of-3">
                    <span><input type="text"/></span>
                </div>
            </div>
        </div>
    </apex:form>
</apex:page>

enter image description here

  • Thanks @Avjit I think this is the only way we could do..if we use apex control, it's not properly formatting, I used above your example to get it working with few apex javascript function calls. Cheers! – Pasan Eeriyagama Jan 16 at 3:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.