locked
Infinite Scroll Inside a Modal Body? RRS feed

  • Question

  • User-1614409683 posted

    Hello,

    I'm trying to get my modal to load more data once I've scrolled to the bottom of the modal. I'm having a bit of trouble getting an alert to appear once I've scrolled to the bottom of the modal. Some guidance would be great thank you.

    <div class="modal" id="ChatModal" tabindex="-1" data-backdrop="static" role="dialog" aria-labelledby="Chat_Labeld_By" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div id="ChatModalBody" class="modal-body" style="max-height:400pxword-wrapbreak-wordoverflow-x:hiddenoverflow-y:auto;">
                        <div id="infiniteScroll">
                            <table id="tabe" width="100%" style="word-wrapbreak-wordtable-layout:fixed;">
                                <tbody>
                                    <tr>
                                        <td>Testing</td>
                                    </tr>
                                    <tr>
                                        <td>Testing</td>
                                    </tr>
                                    <tr>
                                        <td>Testing</td>
                                    </tr>
                                    <tr>
                                        <td>Testing</td>
                                    </tr>
                                    //Loads of more rows,
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer" id="ChatModalFooter">
                        <button type="button" id="CloseChatModal" class="btn secondary-btn" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    Tuesday, March 16, 2021 3:38 PM

All replies

  • User1120430333 posted

    You shouldn't be having some kind of infinite scrolling, becuase it's not user friendly. 

    You should think about using some kind of paging

    Paging And Sorting In ASP.NET MVC (c-sharpcorner.com)

    Tuesday, March 16, 2021 7:51 PM
  • User1686398519 posted

    Hi RARJ94, 

    According to your needs, I wrote an example, you can refer to it.

    <style>
        div.modal-body > div.content {
            height: 50vh;
            overflow-y: auto;
        }
    </style>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <div class="alert alert-success alert-dismissible" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <strong>Warning!</strong> Better check yourself, you're not looking too good.
                    </div>
                    <div class="content">
                        <table id="tabe" width="100%" style="word-wrap: break-word; table-layout:fixed;">
                            <tbody>
                                @for (var i = 0; i < 30; i++)
                                {
                                    <tr>
                                        <td>Testing</td>
                                    </tr>
                                    <tr>
                                        <td>Testing</td>
                                    </tr>
                                    <tr>
                                        <td>Testing</td>
                                    </tr>
                                    <tr>
                                        <td>Testing</td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    Here is the result. 

    Best Regards,

    YihuiSun

    Wednesday, March 17, 2021 2:40 AM