jQueryUI sortable on table rows shrinks them while being dragged

Question

This issue of table rows shrinking while dragged in the sortable function troubles me for a long time. Any answer? (Q&A)

P.S. in order for sortable to work at all on tables you MUST use TBODY around the table rows you wish to sort and then call the sortable function on the containing TBODY.

score 46 · Answer 1 · answered Dec 01 '14 at 14:38

46

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

answered Dec 01 '14 at 14:38

Alexandr Derkach

469
4
2

+1 Great to see such a simple solution; I've suffered silently with this issue for long. Even though I still have some cell width differences between the row(s) being dragged and the rest, this comes quite close to the magic bullet. – Ifedi Okonkwo Nov 11 '15 at 21:57
Is this anywhere in the docs? I can't seem to find it. But I want to understand it a little better. – Jarrod Aug 10 '17 at 04:11
1

I have a bootstrap table and table shrinks when dragging. Your solution works for a row - it doesn't shrink any more while dragging. Any solution for table to stay fixed width while dragging? – FrenkyB Feb 16 '18 at 07:08
I have same issue as FrenkyB, table of width 100% is shrinking still. Any work around @FrenkyB – Mike Flynn Jul 13 '22 at 21:54

score 12 · Answer 2 · answered Jun 21 '12 at 20:12

12

All you need to do, is to give a specific-pixeled width to the table cells. How can we do it without knowing the table cells' content? simple:

$(document).ready(function(){
    $('td').each(function(){
        $(this).css('width', $(this).width() +'px');
    });
});

answered Jun 21 '12 at 20:12

Yossi

372
1
2
13

Thank you. This works perfectly with Bootstrap, which didn't have any clear solutions. – jaredstenquist Jan 06 '13 at 23:40
2

The "better" approach is on [stackoverflow](http://stackoverflow.com/a/1372954/1057527) – machineaddict Apr 01 '13 at 12:18
2

I like this approach. Better than the 'better' one. – NeoWang Nov 28 '13 at 13:43
Probably should use $(this).outerWidth() as it includes padding – thesuperav Aug 08 '14 at 11:13
1

The problem with this one is that it only runs once. The "better" one runs even if the window gets resized. – styks Aug 22 '14 at 20:48

bmoran · Answer 3 · 2016-03-24T19:18:43.457

12

I stumbled on a solution online.

var fixHelper = function(e, ui) {  
  ui.children().each(function() {  
    $(this).width($(this).width());  
  });  
  return ui;  
};
$(“#sort tbody”).sortable({  
 helper: fixHelper  
 }).disableSelection();

Fix sortable tr from shrinking

edited Mar 24 '16 at 19:18

answered Mar 24 '16 at 16:16

bmoran

1,499
2
13
21

Saying thanks here, as your comment on https://stackoverflow.com/a/10481803/1531124 saved my day with Intellij! – GhostCat Aug 07 '18 at 09:37

score -1 · Answer 4 · edited Mar 01 '16 at 12:31

None of the offered solutions worked for me.

In my case, jQuery's ui sortable's calculated height and width, was rounded down and overriding the auto calculated dimensions via the style attribute.

Here is what I did to fix the problem, which I found to be more elegant than most of the offered solutions. (even though it has !importants in it.)

.ui-sortable-helper {
    width: auto !important;
    height: auto !important;
}

score -5 · Answer 5 · answered May 16 '17 at 03:17

src jquery-1.12.4.js

src jquery-ui.js

link rel jquery-ui.css

@model Servidor.CListados
@{
    ViewBag.Title = "Index";
}
@using (Html.BeginForm())
{
    <h2>Listados</h2>
    <h2>@ViewBag.Mensaje</h2>
    <table>
            <tr>
                <th>Campo1</th>
                <th>Campo2</th>
            </tr>
        <tbody id="sortable">
            @foreach (var item in Model.ListaTabla1)
            {
                <tr >
                    <td>@Html.DisplayFor(modelItem => item.Campo1)</td>
                    <td>@Html.DisplayFor(modelItem => item.Campo2)</td>
                </tr>
            }
        </tbody>
    </table>
    @*<ul id="sortable">
        @foreach (var item in Model.ListaTabla1)
        {
            <li>@Html.DisplayFor(modelItem => item.Campo1)</li>
        }
    </ul>*@
}
     <script>$("#sortable").sortable();</script>

jQueryUI sortable on table rows shrinks them while being dragged

5 Answers5

Linked