Sortable: Wrong placeholder height with tbody items and multiple <tr>s

[Alex Günsche]

There’s the following issue with the Sortable widget:

When making a <table> with several <tbody>s which again contain several <tr>s sortable, the placeholder for the <tbody>s is too low. This causes the height of the whole <table> (and the rest of the page below the table) to “flicker” as soon as a <tbody> is being dragged.

Example: ​http://jsfiddle.net/jzwq5j73/4/

The first part of this problem is that the placeholder for the <tbody> is created with only one <tr> with a series of empty <td>s. This is bad because (a) there may be more than one row, and (b) if the <td>s of the original <tbody> have content, they are likely to be higher than the empty ones in the placeholder.

Source reference: ​https://github.com/jquery/jquery-ui/blob/1.11.4/ui/sortable.js#L791-L795

The second part is the fact that the placeholder <tbody> doesn’t get the height of the original element, because it already has got a height (even though it’s a wrong one).

Source reference: ​https://github.com/jquery/jquery-ui/blob/1.11.4/ui/sortable.js#L817

Tested with jQuery UI 1.11.4, but saw this code in the master branch, too.

[Alex Günsche]

A “monkey-patch” workaround which works for me is to always assign the original element’s height to the placeholder in ​https://github.com/jquery/jquery-ui/blob/1.11.4/ui/sortable.js#L817 (i.e. remove the if condition and always execute the block).

[Alex Günsche]

So, does anybody care?