Question

In previous version when inline editing all looking good:

But in new version it is looking like that (i put read border over):

How to fix that?

I am using jQuery 1.6.1, jQueryUI 1.8.13

I also have using the latest jqGrid css file

Answer 1

The reason seems to me the wrong hover effects included in the jqGrid 4.1.0 on the <span> element with the save and cancel icons:

onmouseover=jQuery(this).addClass('ui-state-hover');
onmouseout=jQuery(this).removeClass('ui-state-hover');

see the source code of jquery.fmatter.js.

If I correct understand the problem the adding of ‘ui-state-hover’ class overwrites the background-position to 50% 50%, so the icons for the disk (ui-icon-disk) or the cancel icon (ui-icon-cancel) will not more displayed. Instead of that the middle of the background image are displayed.

So I suggest just remove the hover effects inside of loadComplete:

loadComplete: function() {
    $("div.ui-inline-save > span.ui-icon-disk, div.ui-inline-cancel > span.ui-icon-cancel").each(function() {
        this.onmouseover = null;
        this.onmouseout = null;
    });
}

See the demo.

UPDATED:: I found a better way to fix the problem. First we can defive the functions iconHoverFixed and iconNotHoverFixed as following

var iconHoverFixed = function(e) {
        jQuery(this).addClass('ui-state-hover');
        jQuery('span',this).removeClass('ui-state-hover');
    },
    iconNotHoverFixed = function(e) {
        jQuery(this).removeClass('ui-state-hover');
    };

and then we can fix the hovering problem so:

loadComplete: function() {
    $("div.ui-inline-save, div.ui-inline-cancel").each(function() {
        this.onmouseover = iconHoverFixed;
        this.onmouseout = iconNotHoverFixed;
    });
}

See the new demo here or here.