Opened 8 years ago
Last modified 7 years ago
#14889 new bug
Sortable: Wrong placeholder height with tbody items and multiple <tr>s
Reported by: | Alex Günsche | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | none |
Component: | ui.sortable | Version: | 1.11.4 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
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.
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).