CODEWITHSUNDEEP
jqueryjquery-uihtml-tablejquery-ui-sortableshrink
Yossi
Yossi

Reputation: 392

jQueryUI sortable on table rows shrinks them while being dragged

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.

Upvotes: 16

Views: 14160

Answers (5)

julio
julio

Reputation: 1

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>

Upvotes: -5

bmoran
bmoran

Reputation: 1529

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

Upvotes: 13

fakalit
fakalit

Reputation: 1

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

Upvotes: -1

Alexandr Derkach
Alexandr Derkach

Reputation: 489

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

Upvotes: 48

Yossi
Yossi

Reputation: 392

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

Upvotes: 13

Related Questions