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?
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 "View All"."></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:
put it in the "article class":