Space between card header & lightning-datatable

lightning-cardlightning-datatablelightning-web-components

maybe you know the problem that there is a white space between Card Header and a lightning-datatable. You can see it on the screenshot. Do you know how to get rid of it?

Space between Header & Datatable

Here my Code:

<article class="slds-card slds-card_boundary slds-page-header_joined">
    <div class="slds-card__header slds-grid slds-theme_shade">
        <header class="slds-media slds-media_center slds-has-flexi-truncate slds-p-bottom_medium">
            <div class="slds-media__figure">
                <lightning-icon icon-name="standard:contract" size="small"></lightning-icon>
            </div>
            <div class="slds-media__body">
                <h2 class="slds-card__header-title">
                    Contracts ({listOfContractsAll.length})
                    <span class="slds-p-left_xx-small" style="position:relative; top:-10px;">
                        <lightning-helptext content="A maximum of 12 records are displayed. To see all records, you must click on &quot;View All&quot;."></lightning-helptext>
                    </span>
                </h2>
            </div>
            <div class="slds-align_absolute-center slds-size_1-of-3">
                <div class="slds-p-right_small">
                    <lightning-combobox
                            name="typeComboboxValue"
                            label="Type"
                            placeholder="--None--"
                            value={typeComboboxValue}
                            options={optionsForTypeCombobox}
                            onchange={handleChangeFilter}
                            dropdown-alignment="auto">
                    </lightning-combobox>
                </div>
                <div class="slds-align-bottom">
                    <lightning-button-icon class="slds-p-right_xx-small" name="searchContracts" icon-name="utility:search" variant="brand" title="Search" onclick={searchContracts}></lightning-button-icon>
                    <lightning-button-icon name="resetFilterRL" icon-name="utility:undo" variant="brand" title="Reset Filter" onclick={resetFilter}></lightning-button-icon>
                </div>
            </div>
            <div class="slds-no-flex slds-align-bottom slds-size_1-of-3">
                <div class="slds-float_right">
                    <lightning-button-icon variant="border-filled" icon-name="utility:refresh" title="Refresh" onclick={getData}></lightning-button-icon>
                </div>
            </div>
        </header>
    </div>

    <div class="slds-card__body">
        <template if:true={showSpinner}>
            <div class="slds-is-relative slds-m-around_large slds-align_absolute-center">
                <lightning-spinner alternative-text="Loading..." variant="brand"></lightning-spinner>
            </div>
        </template>

        <template if:false={showSpinner}>
            <template if:true={hasData}>
                <div class="slds-scrollable_y" style="max-height: 400px; !important;">
                    <lightning-datatable key-field="Id"
                                         data={listOfContracts}
                                         columns={contractColumns}
                                         hide-checkbox-column="true"
                                         show-row-number-column="true"
                    >
                    </lightning-datatable>
                </div>
            </template>

            <template if:false={hasData}>
                <div class="slds-theme_default">
                    <div class="slds-p-around_medium slds-align_absolute-center slds-p-bottom_small" style="font-size: 14px; font-style: italic;">
                        No records available.
                    </div>
                </div>
            </template>
        </template>
    </div>

    <footer class="slds-card__footer">
        <a class="slds-card__footer-action" onclick={openViewAllModal}>
            View All
        </a>
    </footer>
</article>

Best Answer

I found out how to get rid of it:

Create a CSS-Class in your LWC. Override these two styling hooks:

.spacingCard {
    --sds-c-card-header-spacing-block-end: 0;
    --sds-c-card-body-spacing-block-start: 0;
}

put it in the "article class":

<article class="slds-card slds-card_boundary slds-page-header_joined spacingCard">
Related Topic