0

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

Ali Soltani
  • 9,589
  • 5
  • 30
  • 55
FrenkyB
  • 6,625
  • 14
  • 67
  • 114
  • I had same problem in my project. For getting ride of this, maybe following link help you https://stackoverflow.com/questions/11146000/jqueryui-sortable-on-table-rows-shrinks-them-while-being-dragged. – Ali Soltani Feb 17 '18 at 11:07
  • It's not the problem of rows shrinking, but whole table shrinks. Row stays same width. – FrenkyB Feb 19 '18 at 06:53
  • If you inspect in selected row, you can see when it is dragged, it's style is changed and this style causes shrink row not table. – Ali Soltani Feb 19 '18 at 06:59
  • Perhaps you any solution? Can I ask you to modify code? I've examined selected row and there is really jquery ui class appended. But I don't know how to prevent table from shrinking. – FrenkyB Feb 19 '18 at 17:15
  • I suspect this is related to the `items` option or the `placeholder`. – Twisty Feb 19 '18 at 23:51

2 Answers2

1

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)

Twisty
  • 30,304
  • 2
  • 26
  • 45
  • The table still shrinks while dragging. Example is here: https://codepen.io/FrenkyB/pen/WMZmVj/ – FrenkyB Feb 20 '18 at 06:11
  • @FrenkyB your placeholder somehow has 7 extra cells (`` elements) for it's row; hence, the other rows "shrink". You could add a class via `placeholder` and define it there. Also `forcePlaceholderSize` can be helpful. – Twisty Feb 20 '18 at 15:30
  • I've deleted extra cells (with display:none) and that solved the problem. Although I don't understand how to keep those hidden cells and not shrinking table? Please add this to your answer so I can mark it as solution. – FrenkyB Feb 20 '18 at 16:15
  • @FrenkyB change their width to 0. – Twisty Feb 20 '18 at 16:20
  • I've tried with {width:0;display:none;} - https://codepen.io/FrenkyB/pen/oEqMRo Problem is that as soon as I use display:none, table shrinks. But with only width:0, columns are visible. Basically I have to hide column, but without using display:none. Any more ideas how to do it? – FrenkyB Feb 20 '18 at 16:32
  • @FrenkyB I still see 1 extra cell on the end. Adding update. – Twisty Feb 20 '18 at 16:52
1

Add this in your style sheet:

.ui-sortable-helper {
  display: table;
}
Mukyuu
  • 6,436
  • 8
  • 40
  • 59
Chris Ji
  • 153
  • 1
  • 4