CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
FrenkyB
FrenkyB

Reputation: 7207

Jquery sortable table shrinks while dragging

My problem is that table shrinks while dragging. Row remains it's width, but table shrinks. Is there a way to keep table's original width while dragging?

Example is here

Sortable functionality is being called with:

 $("table[id=tblSelectedCAMERC] tbody").sortable();

enter image description here

Upvotes: 1

Views: 1616

Answers (3)

Jannick Breunis
Jannick Breunis

Reputation: 343

In your sortable function, add a self-created placeholder where you define the column span of the table. In my case 8:

start: function(even, ui) { ui.placeholder.html('<!--[if IE]><td colspan="8" >&nbsp;</td><![endif]-->')},

Now there is an empty row, without height. So add the height in your css (or any other desired layout):

.ui-sortable-helper, .sortable-placeholder {
    display: table; /* This, for me, shows a border around where the row is placed */
    height: 50px;
}

To understand what's happening; jquery creates an element to show in the ui. Various reasons for the ui to mess up, especially in a table. If you create your own placeholder (it could be pink too, for example) you can define how to not mess it up. In this case, adding the colspan.

Upvotes: 0

Chris Ji
Chris Ji

Reputation: 163

Add this in your style sheet:

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

Upvotes: 1

Twisty
Twisty

Reputation: 30893

When using Sortable for a <table> element, it is sometimes best to define exactly what will be the item. Please review: http://api.jqueryui.com/sortable/#option-items

I would advise the following:

$(function(){  
  $("table[id=tblSelectedCAMERC] tbody").sortable({
    sort: function(evt, ui){
      debugger;
    },
    item: "> tr",
    handle: ".iORAS_ORD"
  }).disableSelection();
});

Update

As there are some extra cells, You can do this:

CSS

.shrink td:last-child {
  display: none;
}

JavaScript

$(function(){  
  $("table[id=tblSelectedCAMERC] tbody").sortable({
    sort: function(evt, ui){
      debugger;
    },
    items: "> tr",
    handle: ".iORAS_ORD",
    scroll: true,
    tolerance: "intersect",
    placeholder: "shrink"
  }).disableSelection();
});

Remember that the placeholder class is applied to the item, in this case the <tr>. So if we need to suppress or hide some of the cells, we need to select them. This example assumes 1 extra cell. If you have more cells, I would advise adding a class to them (E.G.: hidden) so that you can more easily select them. You could also try other CSS selectors (https://www.w3schools.com/cssref/css_selectors.asp)

Upvotes: 1

Related Questions