#9979 open bug ()

Opened April 15, 2014 07:55AM UTC

Last modified March 21, 2018 01:28PM UTC

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;
};
Attachments (0)
Change History (6)

Changed April 15, 2014 08:04PM UTC by tj.vantoll comment:1

owner: → Guno
status: new → pending

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.

Changed April 16, 2014 06:10AM UTC by Guno comment:2

status: pending → new

Replying to [comment:1 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).

Changed April 16, 2014 01:32PM UTC by tj.vantoll comment:3

status: new → open
summary: Sortable: hidden cells break layout → Sortable: hidden tables cells break layout when sorting rows
version: 1.10.4 → 1.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.

Changed May 06, 2015 12:40PM UTC by calophi comment:5

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

Changed March 20, 2018 08:58PM UTC by rjollos comment:6

_comment0: Hello... I know this issue is old but I ran into this recently with version 2.1. A workaround I found to fix this is to change the display property od .ui-sortable-helper to 'table'. https://stackoverflow.com/a/28761397/8953064 \ \ CSS = \ \ .ui-sortable-helper { \ display: table; \ } \ \ You can see it working in if you change it in OP's jsbin. You can also do the same for the .ui-sortable-placeholder class. In my case, I made it display:block and set a height & width. I hope this helps anyone else with this problem. → 1521618312541036
_comment1: Hello... I know this issue is old but I ran into this recently with version 2.1. A workaround I found to fix this is to change the display property of `.ui-sortable-helper` to `'table'`. https://stackoverflow.com/a/28761397/8953064 \ \ {{{#!css \ .ui-sortable-helper { \ display: table; \ } \ }}} \ \ You can see it working in if you change it in OP's jsbin. You can also do the same for the .ui-sortable-placeholder class. In my case, I made it `display:block` and set a height & width. I hope this helps anyone else with this problem. → 1521638906285614

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.