Opened 3 years ago

Last modified 2 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.

Change History (3)

comment:1 Changed 3 years ago by 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).

Last edited 3 years ago by Alex Günsche (previous) (diff)

comment:2 Changed 3 years ago by Alex Günsche

So, does anybody care?

comment:3 Changed 2 years ago by Scott González

Component: ui.coreui.sortable
Note: See TracTickets for help on using tickets.