0

Issue demonstrated: http://jsfiddle.net/VLvj9/1/

With the html 

<table>
    <tbody class="sortme">
        <tr><td>Foo</td></tr>
        <tr><td>Bar</td></tr>
        <tr><td>Really long and annoying table row, try to sort me!</td></tr>
    </tbody>
</table>

and the jqueryui

$(".sortme").sortable({
    containment: "parent",
    tolerance: "pointer"
}).disableSelection();

If you attempt to drag and sort either long row, the parent container snaps its width down. The helper is shoved left off the screen by the new tiny parent, and is unable to be sorted.

This doesn't occur without the containment attribute. I can modify the placeholder's width in the start() event to keep the parent wide, but it appears the containment information has already been set by that point and the helper exhibits the same behavior.

Is there any way to have the parent maintain its width information so that containment will work as expected?

I believe this question is referring to the same behavior:

jQueryUI sortable on table rows shrinks them while being dragged

My issue is that table contents are populated by ajax calls (status checking of user <input> content) and the width can change arbitrarily during the page's lifetime, so I can't set a px width on the td or the table.

Community
  • 1
  • 1
Jason Viers
  • 1,722
  • 12
  • 20

1 Answers1

0

Define some width for your parents in percentage:

<table style="width:100%;">
<div class="sortme" style="display: inline-block; width:100%;">

Here is your updated fiddle

EDIT

Since you did not want the width to be in percentage, I calculated the width of the widest element and applied it to the parent. here is the code

var width = $('.sortme div').width(); //Returns max width from all the matched elements
$('#sortDiv').width(width);
var width2 = $('.sortme tr td').width(); //Returns max width from all the matched elements
$('#sortTable').width(width2);

The working fiddle

Mandeep Jain
  • 2,304
  • 4
  • 22
  • 38
  • The problem is I don't want the container to take up the full width, here the yellow background fills the whole area. and I can't set it to some smaller percentage or a fixed value, as often it will contain just "ok", but sometimes it'll have longer messages like this. – Jason Viers Feb 15 '13 at 14:55
  • I appreciate the update, but as I said in the original question, the total width may change through the page's lifetime via ajax calls. If we have a table of "ok"s and sort, it'll set the table width to their width. Then when a ajax call comes back with "super bad really long error", the table will be fixed to the smaller width and crazywrap the new status instead of expanding to include the new content. – Jason Viers Feb 19 '13 at 19:27
  • you can always recalculate it after firing the ajax call – Mandeep Jain Feb 20 '13 at 06:16