Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
meghna nmeghna n 

align radiobutton horizontally in lightning

I have piece of code inside my lightning component.

   <lightning:card title="Advanced Provider">
         <lightning:layout multipleRows="true">
            <lightning:layoutItem size="4" padding="around-small">
                     <dl class="slds-form_horizontal">
                         <dt title="Network ID">
                             <lightning:select name="select1" label="Network ID">
                                         <option value="1">one</option>
                                         <option value="2">two</option>
                                            <option value="3">three</option>
                             </lightning:select></dt></dl>
                      <dl class="slds-form_horizontal"><dt title="EPDB Flag">
                          <lightning:select name="select2" label="EPDB Flag">
                                               <option value="1">one</option>
                                             <option value="2">two</option>
                                               <option value="3">three</option>
                          </lightning:select></dt></dl>
                      <dl class="slds-form_horizontal"><dt title="Language">
                           <lightning:select name="select3" label="Language">
                                                <option value="1">French</option>
                                              <option value="2">English</option>
                                                <option value="3">German</option>
                          </lightning:select></dt></dl>
                      <dl class="slds-form_horizontal slds-wrap"><dt title="Gender">
                           <lightning:radioGroup name="radioGroup"
                                                    label="Gender"
                                                  options="{!v.optRadio}"
                                                 value="{!v.optRadioValue}"
                                                 type="radio"/></dt></dl>
    </lightning:layoutItem>
          </lightning:layout>
</lightning:card>

when I preview the page the radiobuttons appear as follows

align radiobuttons horizontally
But I want the radiobutton to be placed horizontally not vertically

It should be like this

Gender :  <radioButton>Male      <radiobutton>Female

I tried to use as <dl class="slds-list_inline"> but I am not getting radiobuttons horizontally aligned.

Please show me  piece of working code.

thanks
meghna
 
Ajay K DubediAjay K Dubedi
Hi Meghna,
Try this code:
Component: 
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
     
    <aura:attribute name="fruits" type="List" default="[
                                                       {'label': 'Apple', 'value': 'Apple'},
                                                       {'label': 'Banana', 'value': 'Banana'},
                                                       {'label': 'Mango', 'value': 'Mango'}
                                                       ]"/>
   
    <aura:attribute name="FruitValue" type="String" />
    
    <lightning:radioGroup name="myFruits"
                          label="Select Fruits [horizontal view]"
                          options="{! v.fruits }"
                          value="{! v.FruitValue }"
                          type="radio"
                          class="customRadioCls"
                          />
</aura:component>
Custome CSS: 
.THIS.customRadioCls .slds-form-element__control .slds-radio{
    display : inline-block !important;
}

Follow this link for more information:
http://sfdcmonkey.com/2018/08/03/radio-button-group-horizontal-view/

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi

 
meghna nmeghna n
Hi Ajay

I have seen this piece of code from sfdcmonkey website. 
But my question using slds classes only can we implement the same or not?

thanks
meghna

 
Ajay K DubediAjay K Dubedi
Hi,
You can also you slds-grid as follows for your requirement: 
<div class="slds-grid slds-gutters">
        <div>
            <span><ui:inputRadio aura:id="r0" name="others" label="Male" change="{!c.onGroup}"/></span>
        </div>
        <div>
            <span><ui:inputRadio aura:id="r1" name="others" label="Female" change="{!c.onGroup}" value="true"/></span>
        </div>
</div>
Thanks,
Ajay Dubedi
Deepali KulshresthaDeepali Kulshrestha
Hi Meghna,

Greetings to you!
    
- I read your problem 'align radiobutton horizontally in lightning'.
- I implemented in my Org and the solution is you have to change 'display: block' to 'display: inline' so please use Below CSS [Solved] : -
    
CSS : -

    .THIS .slds-form-element__control .slds-radio{
        display: inline !important;
    }
    
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha.