Opened 9 years ago
Last modified 5 years 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 follow-up: 2 Changed 9 years ago by
Owner: | set to Guno |
---|---|
Status: | new → pending |
comment:2 Changed 9 years ago by
Status: | pending → new |
---|
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 9 years ago by
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.
comment:4 Changed 9 years ago by
comment:5 Changed 8 years ago by
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 5 years ago by
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.
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.