Malfunction when table is in a div with display:grid

[michael-ts]

When I try to drag in a table that is in a div that is display:grid, it is impossible to drag elements which are not visible when scrolled all the way to the top. As soon as the with drag even first, suddenly the entire table appears to be scrolled back up to the top (although the scrollbar remains in the unscrolled position), and it is impossible to scroll down past the first screen.

id "test" is what I am putting the table-dragger on using:

var dragger = tableDragger(tab, { mode:"row", onlyBody:true, animation: 300 })

Here is an example of the HTML:

<div style="display: grid; grid-template-columns: 100vw; grid-template-rows: 100vh; overflow: hidden;"><div style="display: grid; grid-template-columns: 25% 75%; grid-template-rows: 100%; overflow: hidden;"><div style="overflow: scroll;" class=""><table id="test" border="1" tabindex="1" class="sindu_origin_table" style="border-collapse: collapse;"><tbody><tr><td class="sindu_handle">TEST0</td></tr><tr><td class="sindu_handle">TEST1</td></tr><tr><td class="sindu_handle">TEST22</td></tr><tr><td class="sindu_handle">TEST23</td></tr><tr><td class="sindu_handle">TEST2</td></tr><tr><td class="sindu_handle">TEST3</td></tr><tr><td class="sindu_handle">TEST4</td></tr><tr><td class="sindu_handle">TEST5</td></tr><tr><td class="sindu_handle">TEST6</td></tr><tr><td class="sindu_handle">TEST7</td></tr><tr><td class="sindu_handle">TEST8</td></tr><tr><td class="sindu_handle">TEST9</td></tr><tr><td class="sindu_handle">TEST10</td></tr><tr><td class="sindu_handle">TEST11</td></tr><tr><td class="sindu_handle">TEST12</td></tr><tr><td class="sindu_handle">TEST13</td></tr><tr><td class="sindu_handle">TEST14</td></tr><tr><td class="sindu_handle">TEST15</td></tr><tr><td class="sindu_handle">TEST16</td></tr><tr><td class="sindu_handle">TEST17</td></tr><tr><td class="sindu_handle">TEST18</td></tr><tr><td class="sindu_handle">TEST19</td></tr><tr><td class="sindu_handle">TEST20</td></tr><tr><td class="sindu_handle">TEST21</td></tr><tr><td class="sindu_handle">TEST24</td></tr><tr><td class="sindu_handle">TEST25</td></tr><tr><td class="sindu_handle">TEST26</td></tr><tr><td class="sindu_handle">TEST27</td></tr><tr><td class="sindu_handle">TEST28</td></tr><tr><td class="sindu_handle">TEST29</td></tr><tr><td class="sindu_handle">TEST30</td></tr><tr><td class="sindu_handle">TEST31</td></tr><tr><td class="sindu_handle">TEST32</td></tr><tr><td class="sindu_handle">TEST33</td></tr><tr><td class="sindu_handle">TEST34</td></tr><tr><td class="sindu_handle">TEST35</td></tr><tr><td class="sindu_handle">TEST36</td></tr><tr><td class="sindu_handle">TEST37</td></tr><tr><td class="sindu_handle">TEST38</td></tr><tr><td class="sindu_handle">TEST39</td></tr><tr><td class="sindu_handle">TEST40</td></tr><tr><td class="sindu_handle">TEST41</td></tr><tr><td class="sindu_handle">TEST42</td></tr><tr><td class="sindu_handle">TEST43</td></tr><tr><td class="sindu_handle">TEST44</td></tr><tr><td class="sindu_handle">TEST45</td></tr><tr><td class="sindu_handle">TEST46</td></tr><tr><td class="sindu_handle">TEST47</td></tr><tr><td class="sindu_handle">TEST48</td></tr><tr><td class="sindu_handle">TEST49</td></tr></tbody></table></div></div></div>

I took three screenshots. First, before I started to drag. I am getting ready to drag TEST23:

This is is right after the drag started. Suddenly TEST23 is up between TEST1 and TEST2 at the top, despite the scrollbar being unchanged:

Next, I had dragged slightly to the right and down. A ghost of TEST23 can be seen down where it's supposed to be. However, if I drop it does not wind up where the ghost is, instead it gets dropped wherever the copy in the table is. In the screen shot below if I drop at this point it winds up between TEST1 and TEST2. But TEST30 is the lowest visible element and the lowest element I can drop it below - it is impossible to arrange it lower than that. Depending on where the element initially was, for elements far enough down the list (e.g. after TEST30) it is impossible to move them any lower, so for instance it's impossible to move any element to the bottom in any number of moves, because once it gets past TEST30 it can't go any further.