function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Atul Shendge 2Atul Shendge 2 

Display Radio Buttons Group In Horizontal View Lightning Component

Hi,

Requirement on my use case is "Need a radiobutton horizontal" I have written component and when I preview it display in a horizontal way, but when I call that component in Flow "It displays in vertical way"

Below is my Component code:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:availableForFlowScreens" access="global" >
        <aura:attribute name="Products" type="List" default="[
                                                       {'label': 'No', 'value': 'No'},
                                                       {'label': 'Yes', 'value': 'Yes'},
                                                       {'label': 'Not Sure', 'value': 'Not Sure'}
                                                       ]"/>  
    <aura:attribute name="NDA" type="List" default="[
                                                       {'label': 'No', 'value': 'No'},
                                                       {'label': 'Yes', 'value': 'Yes'},
                                                       ]"/>
    <aura:attribute name="Joint" type="List" default="[
                                                       {'label': 'No', 'value': 'No'},
                                                       {'label': 'Yes', 'value': 'Yes'},
                                                       ]"/>
    <aura:attribute name="Standards" type="List" default="[
                                                       {'label': 'No', 'value': 'No'},
                                                       {'label': 'Yes', 'value': 'Yes'},
                                                       ]"/>
    <aura:attribute name="Open" type="List" default="[
                                                       {'label': 'No', 'value': 'No'},
                                                       {'label': 'Yes', 'value': 'Yes'},
                                                       ]"/>
    <aura:attribute name="Govt" type="List" default="[
                                                       {'label': 'No', 'value': 'No'},
                                                       {'label': 'Yes', 'value': 'Yes'},
                                                       ]"/>
    
    <aura:attribute name="ProductsValue" type="String" />
    <aura:attribute name="NDAValue" type="String" />
    <aura:attribute name="Technical" type="String" default=" " />
    <aura:attribute name="Art" type="String" default=" " />
       
    <p><b>Product Announcement, Disclosure To Vendor, Use or Sale, Beta Testing and other time sensitivity:*</b></p>   
    <br/>
    <p> Is any aspect of this invention going to be disclosed to anyone outside of Apple within the next 3 months (e.g. in a product announcement or in a product release)? External disclosure may affect Apple's patent rights even if it occurs under the purview of an NDA (e.g., in a developer seed, to a vendor). Is the primary contact for this invention going to be unavailable in the near term to assist with a patent application (e.g., leaving Apple or for an extended business trip)? *</p>
    <br/>
    <lightning:radioGroup name="myColors" 
                          label=" "
                          options="{! v.Products }"
                          value="{! v.ColorValue }"
                          type="radio"
                          />
    <br/>
    
    <p>Has a description of your invention been published outside of Apple, or is external publication, or product announcement, including disclosure under NDA, planned? This includes communication to suppliers under NDA. If so, please describe the disclosure event and provide a date. If no date is known with certainty, please provide an estimate. If none, please state NONE.</p>
    <div style="Width:1150px"><lightning:input name="input1" label=" " /></div>
    <br/>
    <p><b>NDA (non disclosure agreement): </b></p>
    <br/>
    <p>Might there be any NDA related to this disclosure? </p>
    <br/>
    <lightning:radioGroup name="myNDA" 
                          label=" "
                          options="{! v.NDA }"
                          value="{! v.NDAValue }"
                          type="radio"
                          />
    <br/><br/>
    <p><b>Conception and Implementation </b></p>
    <hr/>
    <br/>
    <p><b>Conception:</b></p>
    <br/>
    <p>Provide an estimated date when the invention was first conceived. If you have any written evidence of the date of conception, please upload it under Disclosure Documents. Also provide a description of any written evidence of the date of conception. </p>
    <br/>
    <div style="Width:1150px"><lightning:input name="input1" label=" " /></div>
    <br/>
    <p><b>Conception Location:</b></p>
    <br/>
    <p>If the invention was NOT completely conceived in the US, please provide the country in which the invention was conceived. If the conception of the invention occurred in more than one country, please provide all countries and an estimated percentage for each country. </p>
    <br/>
    <div style="Width:1150px"><lightning:input name="input1" label=" " /></div>
    <br/>
    <p><b>Implementation:</b></p>
    <br/>
    <p>Has the invention been built or implemented? If so, please provide the details of the first time the invention was built or implemented (when, where, by whom, etc). If none, please state NONE. </p>
    <br/>
    <div style="Width:1150px"><lightning:input name="input1" label=" " /></div>
    
    <br/>
    <p><b>Joint Development / Standards / Open Source Code / Government Project </b></p>
    <hr/>
    <br/>
    <p><b>Joint Development:</b></p>
    <br/>
    <p>Was your invention conceived, or made in collaboration with, anyone other than an Apple employee or Apple-hired contractor? Please list any joint development projects related to this invention. </p>
    <br/>
    <lightning:radioGroup name="myJoint" 
                          label=" "
                          options="{! v.Joint }"
                          value="{! v.JointValue }"
                          type="radio"
                          />
    <br/><br/>
    <p><b>Standards:</b></p>
    <br/>
    <p>Might this invention relate to an existing or future-developed technical standard? </p>
    <br/>
    <lightning:radioGroup name="myStandards" 
                          label=" "
                          options="{! v.Standards }"
                          value="{! v.StandardsValue }"
                          type="radio"
                          />
    <br/><br/>
    <p><b>Open Source Code:</b></p>
    <br/>
    <p>Might there be any related open source issues? </p>
    <br/>
    <lightning:radioGroup name="myOpen" 
                          label=" "
                          options="{! v.Open }"
                          value="{! v.OpenValue }"
                          type="radio"
                          />
    <br/><br/>
    <p><b>Government Project:</b></p>
    <br/>
    <p>Was the invention developed under a Government Agreement or in conjunction with a Governmental laboratory, department, or agency? Please list any government development projects related to this invention. </p>
    <br/>
    <lightning:radioGroup name="myGovt" 
                          label=" "
                          options="{! v.Govt }"
                          value="{! v.GovtValue }"
                          type="radio"
                          />
    <br/>
    <p><b>Technical Review</b></p>
    <hr/>
    <br/>
    <p><b>Technical Reviewer(s):</b></p>
    <div> <b>In addition to patent committee, is there anyone who you would like to provide comments or feedback on your invention? </b><lightning:button class="customButton" variant="brand" aura:id="tech" label="Add" onclick="{! c.handleClick }" value="{!v.Technical}"/></div>
    <br/><br/>
    <p><b>Known Art</b></p>
    <hr/>
    <br/>
    <p><b>Known Art Attachments: </b></p>
    <br/>
    <p>Identify the closest or most relevant known art that you are currently aware of, including your own previously-filed patent applications. Please attach any known art documents below that you have. There is no need to do a search. </p>
    <br/>
    <div><b>Known Art (Publications and Patents) </b><lightning:button class="customButton1" variant="brand" aura:id="Art" label="Add" onclick="{! c.handleClick }" value="{!v.Art}"/></div>
    <br/><br/>
    <p><b>Inventor Comments</b></p>
    <hr/>
    <br/>
    <p><b>Inventor Comments:</b></p>
    <br/>
    <p>Please provide any additional comments you may have in the space provided. If you have no additional comments, please explicitly state NONE. </p>
    <br/>
    <div style="Width:1150px"><lightning:input name="input1" label=" " /></div>
    <br/><br/>
    <p>Once you have completed the entire IDF,  [  Print  ] out a final copy, and keep it for your record.</p>
    <hr/>
</aura:component>
Please need help on thisUser-added image
MagulanDuraipandianMagulanDuraipandian
You can use button type or change the CSS in the Style. Check the below link for example

https://www.infallibletechie.com/2020/03/how-to-display-radio-group-horizontally.html
Atul Shendge 2Atul Shendge 2
Hi Magulan,

Thanks for the reply.

But the output was like this:
User-added image

I need in the radio style.

Any lead or help would be appreciated.'

Thanks
Atul Shendge