0

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>

Example 1 when .slds-is-fixed applied Example 2 when .slds-is-fixed applied

1 Answer 1

0

I applied inline stylish to the spinner element to display:fixed.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .