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.

Convertite

Answer 1

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

Obsidian

+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. – Aguiar

Is this anywhere in the docs? I can't seem to find it. But I want to understand it a little better. – Jujube

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? – Bebeeru

I have same issue as FrenkyB, table of width 100% is shrinking still. Any work around @Bebeeru – Corrugate

Answer 2

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

Convertite

Thank you. This works perfectly with Bootstrap, which didn't have any clear solutions. – Groceryman

The "better" approach is on stackoverflow – Stantonstanway

I like this approach. Better than the 'better' one. – Berth

Probably should use $(this).outerWidth() as it includes padding – Argentine

The problem with this one is that it only runs once. The "better" one runs even if the window gets resized. – Terce

Answer 3

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

Emmen

Saying thanks here, as your comment on https://mcmap.net/q/195121/-how-to-move-out-of-auto-completed-brackets-in-intellij-idea-without-using-the-arrow-keys saved my day with Intellij! – Sodality

Answer 4

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

Accipitrine

Answer 5

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>

Langley