An editable column via jeditable resizes (gets wider) on clicking in another cell in the same column

autoabacus

This problem can be reproduced using the DataTables editable example (http://datatables.net/beta/1.9/examples/api/editable.html for 1.9 or the 1.8 equivalent).

Click on a cell then click on another cell in the same column and the column gets wider. The problem appears to be the same as the
http://www.datatables.net/forums/discussion/4304/strange-bug-columns-resize-on-click/p1
one. The probable cause was described by d7a7z7e7d there in a 2 march post.

The d7a7z7e7d fix does not work for the examples, though, as that fix was for when the jeditable onblur setting was 'submit' rather than the default of 'cancel' as it is in the examples. Applying d7a7z7e7d's suggested fix (timeout changed to 0) on the 'cancel' branch of jeditable does fix the problem. Though clearly this is not an ideal fix, and a proper Data Tables fix would be better.

I have noticed that the jQuery DataTables Editable plug-in from Jovan Popovic does not appear to exhibit this problem.

allan

What I think is happening is that when jEditable applies its calculated width to the input element, it isn't taking into account padding which is applied on that element - so width+padding > 100% - hence the problem.

The "fix" is to simply add "width": "100%" to the jEditable initialisation which I've just done on the demo page above. Ideally this would be fixed in jEditable, but there might be a reason that I'm not aware of for doing it the way it currently is.

Allan