I have a lightning-data-table that can output a high count of rows. I am able to contain the spinner by applying .slds-is-relative to the content's containing div. However, the spinner displays at the center of the component rather than being fixed and following the user's scroll. I have tried applying .slds-is-fixed on the lightning:spinner element, but the opaque background then spills out of the entire component. How can I keep it contained and have the spinner position fixed?
Current
<template>
<template if:true={showTable}>
<div class="slds-is-relative">
<div if:false={showCombobox} class="slds-text-title slds-m-bottom_xxx-small">
<div class="slds-p-around_medium lgc-bg">
Help
<lightning-helptext content="Select checkboxes to mass update Status and Close Reason columns."></lightning-helptext>
</div>
</div>
<!-- Combobox & button to mass update Status column -->
<template if:true={showCombobox}>
<lightning-combobox
name="Contact Status"
label="Contact Status"
value={value}
placeholder="Select status"
options={cStatusOptions}
onchange={handleChange}
class="slds-m-bottom_xx-small buttonWidth"></lightning-combobox>
<!-- Close Reason combobox -->
<div class="slds-m-bottom_xx-small slds-m-left_x-small buttonWidth" if:true={showReasonCombobox}>
<lightning-combobox
name="Close Reason"
label="Close Reason"
value={value}
placeholder="Select reason"
options={cReasonOptions}
onchange={handleReasonChange}></lightning-combobox>
</div>
<button onclick={updateSelected} class="slds-button slds-button_neutral slds-m-bottom_xx-small slds-m-left_x-small">Update</button>
</template>
<div if:true={showActionButtons} style="display: inline-block;">
<button onclick={handleCancel} class="slds-align-absolute-center slds-button slds-button_neutral slds-m-bottom_xx-small slds-m-left_x-small">Cancel</button>
<button onclick={handleSaveTop} class="slds-align-absolute-center slds-button slds-button_brand slds-m-bottom_xx-small slds-m-left_x-small">Save</button>
</div>
<!-- Contact datatable, imports / extends lightning-data-table -->
<c-contact-datatable
key-field="Id"
data={data}
columns={columns}
onpicklistchanged={picklistChanged}
onvalueselect={handleSelection}
draft-values={draftValues}
oncellchange={handleCellChange}
onrowselection={handleRowSelection}
onsave={handleSave}
oncancel={handleCancel}
selected-rows={setSelectedRows}
errors={errors}>
</c-contact-datatable>
<!-- Spinner -->
<div if:true={showSpinner}>
<lightning-spinner alternative-text="Loading" variant="brand"></lightning-spinner>
</div>
</div>
</template>
</template>
Tried
<template>
<template if:true={showTable}>
<div class="slds-is-relative">
<div if:false={showCombobox} class="slds-text-title slds-m-bottom_xxx-small">
<div class="slds-p-around_medium lgc-bg">
Help
<lightning-helptext content="Select checkboxes to mass update Status and Close Reason columns."></lightning-helptext>
</div>
</div>
<!-- Combobox & button to mass update Status column -->
<template if:true={showCombobox}>
<lightning-combobox
name="Contact Status"
label="Contact Status"
value={value}
placeholder="Select status"
options={cStatusOptions}
onchange={handleChange}
class="slds-m-bottom_xx-small buttonWidth"></lightning-combobox>
<!-- Close Reason combobox -->
<div class="slds-m-bottom_xx-small slds-m-left_x-small buttonWidth" if:true={showReasonCombobox}>
<lightning-combobox
name="Close Reason"
label="Close Reason"
value={value}
placeholder="Select reason"
options={cReasonOptions}
onchange={handleReasonChange}></lightning-combobox>
</div>
<button onclick={updateSelected} class="slds-button slds-button_neutral slds-m-bottom_xx-small slds-m-left_x-small">Update</button>
</template>
<div if:true={showActionButtons} style="display: inline-block;">
<button onclick={handleCancel} class="slds-align-absolute-center slds-button slds-button_neutral slds-m-bottom_xx-small slds-m-left_x-small">Cancel</button>
<button onclick={handleSaveTop} class="slds-align-absolute-center slds-button slds-button_brand slds-m-bottom_xx-small slds-m-left_x-small">Save</button>
</div>
<!-- Contact datatable, imports / extends lightning-data-table -->
<c-contact-datatable
key-field="Id"
data={data}
columns={columns}
onpicklistchanged={picklistChanged}
onvalueselect={handleSelection}
draft-values={draftValues}
oncellchange={handleCellChange}
onrowselection={handleRowSelection}
onsave={handleSave}
oncancel={handleCancel}
selected-rows={setSelectedRows}
errors={errors}>
</c-contact-datatable>
<!-- Spinner -->
<div if:true={showSpinner}>
<lightning-spinner class="slds-is-fixed" alternative-text="Loading" variant="brand"></lightning-spinner>
</div>
</div>
</template>
</template>
