2

I am using a lightning-modal and having a hard time getting it to scroll at all. I'm using pretty simple markup, similar to the docs.

<template>
    <lightning-modal-header label="My Modal"></lightning-modal-header>
    <lightning-modal-body class="slds-is-relative">
        <!-- some content -->
    </lightning-modal-body>
    <lightning-modal-footer>
        <!-- buttons -->
    </lightning-modal-footer>
</template>

I tried removing the slds-is-relative class, but that did not help. It's there in the first place so loading spiners render inside the modal instead of taking up full page height. I've tried several variations:

attempt1() {
    myElement.scrollTop = 0;
}
attempt2() {
    myElement.setAttribute("scrollTop", 0);
}
attempt3() {
    const top = event.target.getBoundingClientRect().top + window.scrollY;
    window.scrollTo({ top, left: 0, behavior: "smooth" });
}
attempt4() {
    const top = event.target.getBoundingClientRect().top + window.scrollY;
    window.scrollBy({ top, left: 0, behavior: "smooth" });
}

None of these approaches cause the modal to scroll whatsoever in any direction. Is scrolling a modal impossible? If not, what am I missing?

Improve this question
4
  • you can try slds-scrollable_x, slds-scrollable_y, slds-scrollable classes Commented Feb 25 at 3:55
  • On the body, or where? Regardless, I highly doubt this css will help. The scrollbars are there. I can scroll with my mouse. Just not with Javascript. Commented Feb 25 at 13:31
  • I didn't have to do anything for my modal content to scroll. or is this about auto scrolling with JS? Commented Feb 27 at 4:38
  • Yes scrolling with JS. Hence the Javascript snippet. Commented Feb 27 at 13:33

1 Answer 1

Reset to default
0

Assuming you want to auto scroll conditionally in JavaScript, you can use a div tag in the modal body to control the position. Then in JS, set divElement.scrollLeft and/or divElement.scrollTop in pixel values to auto-move the scroll bars.

Your div tag needs the class slds-scrollable and depending on the modal content, you may need to set a height/width to show the horizontal and vertical bars.

Here is a simple modal component to illustrate this :

JS

import LightningModal from 'lightning/modal';

export default class Modal extends LightningModal {
    handleOkay() {
        this.close('okay');
    }

    handleScrollTop(){
        let topDiv = this.refs.topDiv;
        let divPos = topDiv.getBoundingClientRect();                            
        topDiv.scrollLeft = divPos.x + 500; //scrolls on the middle on the modal
        topDiv.scrollTop = 0; //scrolls at the top
    }

    handleScrollDown(){
        let topDiv = this.refs.topDiv;
        let divPos = topDiv.getBoundingClientRect();                            
        topDiv.scrollLeft = divPos.x + 1200; //moves completely from its left edge.
        topDiv.scrollTop = 1200; //scrolls at the bottom
    }
}

HTML

<template>
    <lightning-modal-header label="Modal header"></lightning-modal-header>
        <lightning-modal-body> 
        <div lwc:ref="topDiv" class="slds-scrollable" style="height:15rem;">
            <div class="slds-text-longform" style="width:200%">
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
            It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
            and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
            It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
            and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
            It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
            and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
            It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
            and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
            It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
            and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
            when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
            It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
            It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
            and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
        </div>
        </lightning-modal-body>
    <lightning-modal-footer>
        <lightning-button label="OK" onclick={handleOkay}></lightning-button>
        <lightning-button label="Scroll top" onclick={handleScrollTop}></lightning-button>
        <lightning-button label="Scroll down" onclick={handleScrollDown}></lightning-button>
    </lightning-modal-footer>
</template>

As suggested by @Tobirama, used lwc:ref to easily get the top div element

Improve this answer
2
  • The height seems to be the only part of this answer that actually changes behavior. If you remove it, does scrolling still work? Commented Feb 27 at 14:32
  • It depends on the content displayed on the modal. For shorter content, then you need the height to force the scroll bar to display. But if the content is already long, then the scroll bar shows by default without the height in style. Commented Feb 27 at 15:30

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.