2

This question has already been asked here, but there are no answers at all. I tried this, but no luck. Can someone please assist?

The Issue

I have a custom LWC that implements a traditional SLDS based modal. It works fine in desktop view, however on a mobile device, if the content within the LWC is too long, the SLDS backdrop ends after the height of the device and the modal itself is stuck on the top. That is, in our specific example, if a user tries to remove a record that is way down the page by clicking on the row level action labeled 'X', the confirmation modal shows way up on the page (and not right where they clicked the button) forcing the user to scroll up to see the modal and interact with it. How can I position the modal dynamically based on user's current scroll position on the device?

Here is the current code snippet:

<template if:true={isRemove}>

    <div if:false={loading} class="slds-is-relative loader">
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open slds-modal_medium">
            <div class="slds-modal__container">
                <header class="slds-modal__header slds-p-vertical_x-large">
                    <h2 id="modal-heading-05" class="slds-modal__title slds-hyphenate">Remove</h2>
                </header>

                <div id="modal-content-05" class="slds-modal__content"> 
                    <div class="slds-p-around_x-small">
                        <lightning-combobox name="reason" label="Enter Reason:" placeholder="Select Reason" options={reasons}></lightning-combobox>
                    </div>
                    
                    <div class="slds-col slds-size_1-of-1">
                        <div class="slds-p-around_medium slds-align_absolute-center">
                            <lightning-button class="slds-m-top_small slds-p-around_medium" variant="brand" name="yes" label="Yes" onclick={doRemove}></lightning-button>
                            <lightning-button class="slds-m-top_small slds-p-around_medium" variant="brand" name="No" label="No" onclick={cancelRemove}></lightning-button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="slds-backdrop slds-backdrop_open"></div>

</template>

enter image description here

0

You must log in to answer this question.