Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
input width 100% with no issues during inline editing
05/11/2009
09:03
Avatar
snobo
Member
Members
Forum Posts: 34
Member Since:
05/03/2009
sp_UserOfflineSmall Offline

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

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
70 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information