0

I have developed an LWC which uses custom datatable. In that datatable, If I use <lightning-record-edit-form> and <lightning-input-field>, the column widths change. Please see the screenshots.

Screenshot 1:

The 3rd column is using <lightning-input-field>. (column alignment is improper)

sc1

Screenshot 2:

The 3rd column is using <lightning-input type="text">. (column alignment is proper)

sc2

I wish to use <lightning-input-field> for column 3 and I wish to align the columns perfectly as seen in screenshot 2.

I have tried using <div class="slds-grid"> and <lightning-layout> but both didn't work. Please help. Thank You!😃

CSS Code:

.set-width {
    width: 90%;
}

HTML Code:

<!-- this is the datatable -->
                    <table class="slds-m-left_large">
                        <!-- this is the header of the datatable -->
                        <thead>
                            <tr>
                                <th>
                                    <div class="set-width" title="Field">Field</div>
                                </th>
                                <th>
                                    <div class="set-width" title="Operator">Operator</div>
                                </th>
                                <th>
                                    <div class="set-width" title="Input Value">Input Value</div>
                                </th>
                            </tr>
                        </thead>
                        <!-- this is the body of the datatable -->
                        <tbody>
                            <!-- iterate over wrapper list -->
                            <template iterator:item={wrapperListCopy}>
                                <!-- set index as the key for each item -->
                                <tr key={item.value.index}>
                                    <!-- this is the field combobox -->
                                    <td>
                                        <lightning-combobox name={item.value.index} class="set-width"
                                            value={item.value.filterField} options={picklistOptions}
                                            onchange={handleChangeOfPicklist}></lightning-combobox>
                                    </td>

                                    <!-- this is the operator combobox -->
                                    <td>
                                        <lightning-combobox name={item.value.index} class="set-width"
                                            value={item.value.selectedOperator}
                                            options={item.value.availableOperator} onchange={handleChangeOfOperator}>
                                        </lightning-combobox>
                                    </td>
                                    <!-- this is the input value. pass objectApiName to lightning-record-edit-form and use lightning-input-field to display the field. This will display the field along with its datatype.-->
                                    <td>
                                        <div class="set-width">

                                             <lightning-record-edit-form object-api-name={objectApiName}>
                                                   <lightning-input-field variant="label-hidden" id={item.value.index} onchange={handleLightningInputField} field-name={item.value.inputFieldName} value={item.value.filterValue}>
                                                   </lightning-input-field>
                                              </lightning-record-edit-form>
                                            
                                        </div>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
1

Introduce a new style in the css code file.

.tr-width {
    width: 40%;
}

Use the css class on the specific td element of the HTML table (as shown in the code snippet below).

<!-- this is the input value. pass objectApiName to lightning-record-edit-form and use lightning-input-field to display the field. This will display the field along with its datatype.-->
<td class="tr-width">
    <div class="set-width">
        <lightning-record-edit-form object-api-name={objectApiName}>
           <lightning-input-field variant="label-hidden" id={item.value.index} onchange={handleLightningInputField}     field-name={item.value.inputFieldName} value={item.value.filterValue}></lightning-input-field>
      </lightning-record-edit-form>     
    </div>
</td>

If you are using multiple sections or lightning-card (i.e., one each for Contract, Contact Address & Customer), then you'll have to update the td elements for each section.

Note: Choose the width value that best suits your requirement. It shouldn't be a small value because if the label value is longer, then there'll be a minor vertical alignment issue.

4
  • It worked. Thanks a lot! Can you tell me why the problem occurred? And how did applying css class to td element solve the issue?
    – Koustubh
    Aug 27 '20 at 14:07
  • 1
    so, all the td elements are basically columns in the table. Under each row, the first 2 td elements have the lightning-combobox which produce the same structure/ styling and hence, no issues (i.e., they align perfectly). But the 3rd td element has lightning-record-edit-form and this component in each row is producing different HTML structure/ styling (corresponding to checkbox, multi-select, textbox etc.). So, the lightning framework is adjusting their style attributes (i.e., for each recordEditForm) to have best fit within the parent component.
    – arut
    Aug 27 '20 at 15:05
  • 1
    Now, the css class set-width is applied to the elements inside td element but not to the td element itself. Since, no styling is applied to the td element, the browser API is free to choose the best possible height & width for td elements depending on the inner element's style.
    – arut
    Aug 27 '20 at 15:08
  • 1
    By providing a new css class tr-width (40%) and applying it specifically on the 3rd td element, we are instructing the framework to allocate 40% of the row width (tr element) for the 3rd td element and the rest of the row width to the remaining td elements. Now, because we have fixed the 3rd td width, styling of anything that is rendered by the recordEditForm within will be adjusted by the framework/ browser API to be within this specific width. Hope this explains.
    – arut
    Aug 27 '20 at 15:12

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.