Drag and drop incorrect location when scrolling down

[David House]

So I have a dashboard layout in my app, and if I scroll down and drag and drop it is moving the panels way up to the top, any help would be super appreciated.

Html:

<div class="cw-dashboard-container">
    <div class="mb-3"></div>
    <div id="dashboard-page-alert"></div>
    <div>
        @*<div id="grid-stack-demo">
                <div class="grid-stack">

                </div>
            </div>*@
        <div class="cw-dashboard" id="cw-dashboard-panel">

        </div>
    </div>
</div>

CSS:

.cw-dashboard-container {
    max-width: calc(100% - 40px);
    margin: 0px 20px;
    padding: 0;
}
.cw-dashboard {
    margin-bottom: 75px;
}

JS:

        Dashboard = new ej.layouts.DashboardLayout({
            height: '100%',
            resizeStop: onResizeStop,
            resizeStart: onResizeStart,
            allowResizing: false,
            cellSpacing: [20, 20],
            columns: 12,
            mediaQuery: 'max-width: 767px',
            resizableHandles: ['e-south-east', 'e-east', 'e-west', 'e-north', 'e-south'],
            panels: layout.panels,
            //panelID: layout.panels.length + 3
        });

        // render initialized dashboardlayout
        Dashboard.appendTo('#cw-dashboard-panel');
        Dashboard.refresh();

[Sharon Sanchez Selvaraj]

Hi David, 

 

We have checked with your code snippet and have implemented the same in our sample. However we are unable to replicate your issue in our end. 

 

We have attached the sample with the same code for your reference. 

 

https://stackblitz.com/edit/dashboard-sample-dragging-and-dropping?file=index.js 

 

If possible, please provide the following details so that we can assist you promptly. 

 

1. Are you rendering Dashboard within any container which is in the middle of a page(Possibly with a scroller)?
2. Does this issue occur only when the page has a scroller and if the panel is dragged from the bottom of the page?
3. Exact package version in which you get the issue.
4. Else modify the above sample to reproduce your issue.
5. It would be very helpful if you could attach a video reproducing your issue.

 

Please get back to us if you need further assistance. 

 

Regards, 

 

Sharon Sanchez S. 

[David House]

So I looked at your example, and yea everything works fine, I have no idea why it's acting the way it is on my end, there is one div which is the parent of the container, it's the body div, it's classes looks like this:

1. Are you rendering Dashboard within any container which is in the middle of a page(Possibly with a scroller)
   a: It is within a cshtml file being served via a view, in the actual html structure it is under the body div which is a flex box, I also tried disabling all the classes on that and no change to the result.
   
2. Does this issue occur only when the page has a scroller and if the panel is dragged from the bottom of the page?
   a: I am unsure what you mean by has a scroller, but the hirearchy is everything you've seen, after the cw-dashboard-container div there is only the body
   
3. Exact package version in which you get the issue.
   a: Where would I find the package
   
4. Else modify the above sample to reproduce your issue.
   a: I am unable to get it to reproduce the error, I am really stumped.
   
5. It would be very helpful if you could attach a video reproducing your issue.
   a: https://imgur.com/a/MrPv29C

[David House]

Ok so the version number is: 18.4.0.48

[David House]

Sooooo, I updated. Everything is fixed, it's 1000x better, yea I should have saw that one coming, thank you!

[Keerthana Rajendran]

Hi David, 

Thanks for the update. We are glad to hear that the issue has been resolved. Please get back to us if you need further assistance. We will be happy to assist you.  

Regards, 

Keerthana.