I have an HTML code where I want the place the fields side-by-side. Whereas, now it is getting stacked horizontally.

<lightning-card key={Treatment}>
   <p key={Treatment}><b class="slds-align_absolute-center" key={Treatment}>Treatment </b></p>
   <template key={Treatment} for:each={Treatment.value} for:item="TreatmentWithProducts">
      <p key={Treatment}><b key={Treatment}>   Product {TreatmentWithProducts.key}</b></p>
      <lightning-record-edit-form key={Treatment} object-api-name="Ag_Treatment__c">
         <template key={TreatmentWithProducts} for:each={TreatmentWithProducts.value} for:item="Product">
            <!-- <div key={Product} > -->
            <lightning-layout key={Product}>
               <lightning-layout-item key={Product} size="6">
                  <lightning-input-field key={Product} field-name={Product}> </lightning-input-field> <!-- This is the line which renders fields on screen -->
            <!-- </div> -->
   <lightning-button key={Treatment} data-id={Treatment.key} label="Add Prodcuts" title="Add Prodcuts" onclick={addProductRow} icon-name="action:new">

I have truncated the code for brevity.

enter image description here

I want Product 1 and Product 1 Rate fields to be aligned horizontally (side-by-side/ as 2 columns). These fields are getting rendered from lightning-edit-record-form line. (Added a comment too). Any help is appreciated.

1 Answer 1


Move the lightning-layout outside the iterator, and add the multiple-rows attribute, if necessary.

<lightning-layout multiple-rows>
    <template key={TreatmentWithProducts} for:each={TreatmentWithProducts.value} for:item="Product">
        <lightning-layout-item  key={Product} size="6">
            <lightning-input-field key={Product} field-name={Product}> </lightning-input-field>

You must log in to answer this question.

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