Sortable: hidden tables cells break layout when sorting rows

[Guno]

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;
};

[tj.vantoll]

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.

[Guno]

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).

[tj.vantoll]

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.

[tj.vantoll]

Possible fix: ​https://github.com/jquery/jquery-ui/commit/9711c54c6d3d7ecffa9bfccc205522be1f4aa148#commitcomment-6075239.

[calophi]

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

[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.