Opened 5 years ago

Last modified 9 months ago

#9979 open bug

Sortable: hidden tables cells break layout when sorting rows

Reported by: Guno Owned by: Guno
Priority: minor Milestone: none
Component: ui.sortable Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:

Description

Hi,

I'm having a layout issue with the Sortable plugin, if used on a table to reorder rows where some cells/columns are hidden (display: none): Upon dragging one of the rows, all other rows shrink, until the dragged row is released. As more columns are hidden, the effect is more noticeable (and this it looks uglier).

Please have a look at the test case: http://jsbin.com/nohovilu/1/edit

I used to have a workaround which worked with 1.8.17, but upon upgrading to 1.10.4 this no longer works. The workaround was to use a helper which explicitly sets the width of the surrounding row's cells:

helper: function (event, $tr) {
    var $tds = $tr.children(),
        $prevRow = $tr.prev(),
        $nextRow = $tr.next();

    $tds.each(function () {
        var $td = $(this),
            index = $td.index();

        $td.add($prevRow.children('td').eq(index))
           .add($nextRow.children('td').eq(index))
           .width($td.width());
        });
    return $tr;
};

Change History (6)

comment:1 Changed 5 years ago by tj.vantoll

Owner: set to Guno
Status: newpending

HI Guno,

Could you include a test case that shows the behavior before that worked (with the older version of the library)? In my testing I always get a small shift: http://jsbin.com/nohovilu/3/edit.

The only thing I can think of that might have changed the behavior is this commit that was included in 1.10.3: https://github.com/jquery/jquery-ui/commit/9711c54c6d3d7ecffa9bfccc205522be1f4aa148.

comment:2 in reply to:  1 Changed 5 years ago by Guno

Status: pendingnew

Replying to tj.vantoll:

Could you include a test case that shows the behavior before that worked (with the older version of the library)? In my testing I always get a small shift: http://jsbin.com/nohovilu/3/edit.

I was previously using jQueryUI v1.8.17 with jQuery 1.7.1, and I've adjusted the example to show the difference in behaviour using these versions compared to jQuery 2.1 and UI 1.10.4: http://jsbin.com/nohovilu/5/edit

Looks like with the former, the width doesn't change upon dragging, though some table rows seem to be shifted down a bit (didn't see this vertical shift in my own application, but perhaps I managed to work around this some other way using CSS and/or JS. Anyway, this is probably not relevant as it seems fixed in the newer version).

comment:3 Changed 5 years ago by tj.vantoll

Status: newopen
Summary: Sortable: hidden cells break layoutSortable: hidden tables cells break layout when sorting rows
Version: 1.10.41.10.3

Thanks that helps. The behavior changed in 1.10.3 because of this commit: https://github.com/jquery/jquery-ui/commit/9711c54c6d3d7ecffa9bfccc205522be1f4aa148. The commit dealt with table-layout: fixed, so you might have luck defining explicit widths for cells.

comment:5 Changed 4 years ago by calophi

The proposed fix takes out the extra table cell from the placeholder for me, but all my cell widths still change when dragging.

comment:6 Changed 9 months ago by Sean Thompson

Hello... I know this issue is old but I ran into this recently with jquery 2.1 & UI 1.10. A workaround I found that works in my use case is to change the display property of .ui-sortable-helper to 'table'. https://stackoverflow.com/a/28761397/8953064

.ui-sortable-helper {
  display: table;
}

You can see it working in if you change it in OP's jsbin. I hope this helps anyone else with this problem.

Last edited 9 months ago by Sean Thompson (previous) (diff)
Note: See TracTickets for help on using tickets.