javascript - long row in jqueryui sortable with containment breaks sorting -
issue demonstrated: http://jsfiddle.net/vlvj9/1/
with html
<table> <tbody class="sortme"> <tr><td>foo</td></tr> <tr><td>bar</td></tr> <tr><td>really long , annoying table row, seek sort me!</td></tr> </tbody> </table>
and jqueryui
$(".sortme").sortable({ containment: "parent", tolerance: "pointer" }).disableselection();
if effort drag , sort either long row, parent container snaps width down. helper shoved left off screen new tiny parent, , unable sorted.
this doesn't occur without containment
attribute. can modify placeholder's width in start()
event maintain parent wide, appears containment info has been set point , helper exhibits same behavior.
is there way have parent maintain width info containment work expected?
believe question referring same behavior:
jqueryui sortable on table rows shrinks them while beingness dragged
my issue table contents populated ajax calls (status checking of user <input> content) , width can alter arbitrarily during page's lifetime, can't set px width on td or table.
define width parents in percentage:
<table style="width:100%;"> <div class="sortme" style="display: inline-block; width:100%;">
here updated fiddle
edit
since did not want width in percentage, calculated width of widest element , applied parent. here code
var width = $('.sortme div').width(); //returns max width matched elements $('#sortdiv').width(width); var width2 = $('.sortme tr td').width(); //returns max width matched elements $('#sorttable').width(width2);
the working fiddle
javascript jquery-ui sortable
No comments:
Post a Comment