snobo on input width 100% with no issues during inline editing

Thu, 05 Nov 2009 09:03:41 +0200

Hello jqGrid team,

some time ago, in times of v 3.4.4, I suggested a way to fix the "dirty" solution employed by jqGrid when it creates an <INPUT> during inline cell editing and sets its width to 98%, trying to prevent it from sticking out of the cell. Now I can't find that my post in the forum, and I see my fix did not make 3.5, so I wonder, would you consider it for 3.6? I mean, setting an input width to 98% does not really fix the problem. Depending on the padding/borders set by CSS, the input might still stick out of the cell, as it was in my case...

So, the solution is:

1) wrap input in the <div class="twrap">;

2) the CSS is:

.scroll .twrap { padding:1px 2px; background-color:#FFF; /* optional border here */ }
.scroll .twrap input, .FormGrid .twrap input { border:0 none; padding:0; width:100%; }

so borders (imho not necessary if the selected row background is dark enough but always possible) and padding are moved to the wrapper;

3) the following adjustments in the code are necessary to support the wrapper:

in grid.celledit.js

window.setTimeout(function () { $(elc).focus(); },0);

becomes

window.setTimeout(function () { $(elc).focus(); $('input',elc).focus(); },0);

in grid.common.js

jQuery(elem).css({width:"98%"});

becomes (2 occurences)

elem = $('<div class="twrap"></div>').append(elem).get(0);

in grid.formedit.js

$(elc).addClass("FormElement");

becomes

if (elc.tagName=='DIV') $(elc).children().addClass("FormElement"); else $(elc).addClass("FormElement");

in grid.inlinedit.js

$(elc).addClass("editable");

becomes

if (elc.tagName=='DIV') $(elc).children().addClass("editable"); else $(elc).addClass("editable");

Voila. Works in all browsers. I employ it in a big project, so far so good. Hope you find it useful.

cheers,
snobo

jQuery Grid Plugin - jqGrid - Topic: input width 100% with no issues during inline editing

snobo on input width 100% with no issues during inline editing