JQuery UI Sortable Other Rows Shrink while dragging

Question

I am using jQuery UI Sortable for reordering the rows. I have 10 (td) columns out of which I show only 6 and remaining 4 are not shown using display:none.

The issues I am facing are

1. In Chrome while dragging all other rows (not the dragged one) columns shrink and then after dropping the row they get expanded to normal size. Why are the rows columns getting shrink while dragging?

2. In IE8 same as above but after dropping the row they are still in the shrink mode and not expanded to normal size.

Please find the code below. My issue is the other rows width is getting shrink and not the draggable row.

            this.$('.reportTableBody').sortable({               
            tolerance:"pointer",
            //TODO need to fix
            cursor: 'move',
            revert: 'true',
            helper: function(e, tr)
            {
                var myHelper = [];
                myHelper.push('<table style="width: 100%">');
                myHelper.push($(tr).html());
                myHelper.push('</table>');
                return myHelper.join('');                   
            },              
            create: function (event, ui) {                  
                 $("td").each(function () {
                        $(this).css("width", $(this).width());
                 });                                         
                if (jQuery.browser.msie && Number(jQuery.browser.version) == 8) {
                    this.$('.reportTableBody').sortable("option", "cursorAt", { top: 100 });
                }
            },
            stop : function(event, ui){                 
                $(ui.item.parent()).find('tr').each(function(index){
                    $(this).find('.yearSelectCell:first').html(index + 1);

                });                 
                ui.item.trigger('drop', ui.item.index());                   
            }});                        

FYI - some of the columns have display:none which would hide the columns. Do you think because of this the column widths are shrinking ?

Answer 1

You can write a helper function to specifically set the widths as shown here: http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/, or if your page currently controls the column widths of the table, you can specify "clone" for the helper option and choose an appendTo option that will inherit the styling of the specified selector.

The simplest option for appendTo which may work in your case is to set it to the string "parent". This will cause the dragged helper to be a sibling of the sortable item and thus inherit its styling.

If these options do not suit your need then please post some code or link to a JSFiddle.

Answer 2

The solution to my (and hopefully other’s shrinking table rows); you need to set each cell class, or remove it from, the placeholder row. I cleared all ‘class’ and ‘colspan’ first just to be sure the original values were copied in with no overlap or residuals …

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

and on whatever selector for your sortable table

----- js -----
$('tbody').sortable({
  placeholder: 'sortable-placeholder',
  handle: '.handle',
  helper: function(e, tr) {
    var helper;
    helper = tr.clone();
    helper.css('display', '');
    return helper;
  },
  start: function(event, ui) {
    return ui.placeholder.children().each(function(index, child) {
      var source;
      source = ui.helper.children().eq(index);
      $(child).removeAttr('class').removeAttr('colspan');
      $(child).addClass(source.attr('class'));
      if (source.attr('colspan')) {
        return $(child).attr('colspan', source.attr('colspan'));
      }
    });
  }
});