2

I have the following code in a web component:

<lightning-accordion-section name="Products" label="Products">
                <lightning-layout>
                    <lightning-layout-item size="8" padding="around-medium">
                            <c-custom-datatable key-field="id"  
                                                data={generalDetailsLicenseItemsDisplay} 
                                                columns={generalDetailsColumns} 
                                                sorted-by={generalDetailsSortBy}
                                                sorted-direction={generalDetailsSortDirection}
                                                onsort={handleGeneralDetailsSortdata}
                                                onrowaction={handleRowAction} 
                                                class = "customDataTable"
                                                hide-checkbox-column>
                            </c-custom-datatable>
                    </lightning-layout-item>
                    <lightning-layout-item size="4" class="slds-border_left" padding="around-medium">
                            <article class="slds-card slds-card_boundary">
                                <div style="height: 300px; " class="slds-card__body slds-card__body_inner">
                                    <lightning-input type="date" name="input2" label="License Expiration Date" value="2017-09-07"></lightning-input>

                                    <lightning-input type="number" name="input2" label="Days" value="12345"></lightning-input>
                                </div>
                                <footer class="slds-card__footer">
                                    <lightning-button label="Apply" alternative-text="Filter" variant="brand" class="slds-m-left_xx-small"></lightning-button>
                                </footer>
                              </article>
                    </lightning-layout-item>
                </lightning-layout>
            </lightning-accordion-section>

When i put the datatable inside the lightning-layout-item tag, i receive the following:

[![enter image description here][1]][1]

The datatable is stretched to the bottom of screen. On the lightning-layout tag, i see that slds-grid is applied with Display: flex;. When i remove Display: flex; it looks better, without that grey area, but i don't know how to avoid it, and how to fix the size of the datatable.

3

This is because the vertical-align of layout is stretch by default. You need to make it start (or center/end) to remove the vertical stretching of datatable.

<lightning-layout vertical-align="start">

Created this playground link for you.

1
  • Thank you very much! can't believe i have wasted so much time on that.
    – Dana Griff
    Feb 6 '20 at 18:53

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.