2

What I want

I'm trying to show a modal to warn the user when the service he is trying to reach is offline. This salesforce page is accessed by Salesforce1 through a tablet.

How I did

I've created a lwc component called "dialogPanel" containing the modal code available in the Lightning Design System (you can see it here). The code is exactly the same that the website makes available. On the "proposalCard" component, that calls the modal, I've put the following:

<template>
    <article class="slds-card">
        <template if:true={error}>
                <c-dialog-panel></c-dialog-panel>
        </template>
        <!-- rest of the component's code -->
</template>

To display the modal I simply fill the "error" tracked property in the javascript file.

The problem

It works perfectly in desktop screen, but when the modal is displayed in the mobile screen, it is rendered in the middle of the whole page, and not just in the middle of the screen. Besides that, the modal is supposed to be fixed in the middle of the screen, independent of the scroll position of the page, and this doesn't happen: the user has to scroll the page until it's middle position to find the modal. (Sorry if I don't make myself understandable, my English is not that advanced to describe such a complicated problem haha)

What I have already tried

I changed the slds-modal__container height property to "100vh", and it made the height of the container be equal to the height of the screen. But i was rendered in the beginning of the page, and it was not covering the whole page (for example: if the user tried to contact the service in the bottom of the page, he would have to scroll up to see the modal with the error message). I tried to found some solution that would automatically scroll the page to the top, but nothing worked on mobile.

Does anyone have any idea of how make the modal fixed position work in the mobile?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.