[SalesForce] How to display 2 columns in LWC accordion section

I have created a record edit form and I am passing fields dynamically from field sets.

Below is the HTML code where it display only 1 field at a time.

I want to display 2 columns instead of one.

LWC HTML:

<template>
<lightning-record-edit-form object-api-name={sfdcObjectApiName} record-type-id={recTypeId}
    onsuccess={handleSuccess}>
    <lightning-messages></lightning-messages>
    <lightning-accordion allow-multiple-sections-open active-section-name={activeSection}>
        <template for:each={fields_per_section} for:item="accordion_item">
            <lightning-accordion-section key={accordion_item.label} name={accordion_item.label}
                label={accordion_item.label}>
                <template class="slds-grid slds-gutters slds-col slds-size_6-of-12" for:each={accordion_item.fields}
                    for:item="fieldFromSubsection">

                    <lightning-input-field key={fieldFromSubsection} field-name={fieldFromSubsection}
                        name={fieldFromSubsection} id={fieldFromSubsection}>
                    </lightning-input-field>
                </template>
            </lightning-accordion-section>
        </template>
    </lightning-accordion>
        </lightning-record-edit-form>
</template>

enter image description here

I have tried to use slds-size_6-of-12 but its not working. Can someone please me what I am doing wrong here?

I would also like to know if there's possibility to add an icon in accordion section or on the header. I read somewhere that it's not possible to add icon in accordion section

Best Answer

Based on your requirements, you need to add a respective class to the lightning-accordion section.

For example -

  1. If you want to show two fields side by side with label stacked over the input, then use slds-form-element_compound class to the section.

  2. If you need label placed side by side with the input, then use slds-form-element_horizontal class along with slds-grid inside lightning-accordion-section

  3. If you need label and input in 2 separate columns, then just use slds-form-element_horizontal w/o slds-gird.

  4. To use icon, you can just add container div as shown in the code. You can poisition it using some css trick so that it looks good.

enter image description here

<template>
<lightning-accordion allow-multiple-sections-open>

    <lightning-accordion-section name="name" class="slds-form-element_compound" label="Compound 2 Column Accordion">
        <div class="slds-grid slds-form__row">
            <lightning-input name="textield" class="slds-col" type="text" label="First Name">
            </lightning-input>
            <lightning-input name="textield" class="slds-col" type="text" label="Last Name">
            </lightning-input>
        </div>
    </lightning-accordion-section>

    <lightning-accordion-section name="name" class="slds-form-element_horizontal" label="Horizontal 2 Column Accordion">
        <div class="slds-grid">
            <lightning-input name="textield" class="slds-col" type="text" label="First Name">
            </lightning-input>
            <lightning-input name="textield" class="slds-col" type="text" label="Last Name">
            </lightning-input>
        </div>
    </lightning-accordion-section>

    <lightning-accordion-section class="slds-form-element_horizontal" name="name" label="Horizontal Column Accordion">
        <lightning-input name="textield" type="text" label="First Name">
        </lightning-input>
        <lightning-input name="textield" type="text" label="Last Name">
        </lightning-input>
    </lightning-accordion-section>

    <div class="slds-grid">
        <div>
            <lightning-icon icon-name="standard:groups" size="small" alternative-text="Approved" title="Approved">
            </lightning-icon>
        </div>
        <div class="slds-col">
            <lightning-accordion-section name="name" class="slds-form-element_compound"
                label="Compound 2 Column Accordion with Icon">
                <div class="slds-grid slds-form__row">
                    <lightning-input name="textield" class="slds-col" type="text" label="First Name">
                    </lightning-input>
                    <lightning-input name="textield" class="slds-col" type="text" label="Last Name">
                    </lightning-input>
                </div>
            </lightning-accordion-section>
        </div>
    </div>
</lightning-accordion>

Checkout the whole code in action here. Do not hesitate to play around.

And as sfdcfox has done, you can simple do it using lightning-layout as well.

Related Topic