Fix: jqGrid search operator menu items jumping around on hover

A colleague noticed earlier on today, that on the Chrome browser they were using, the search operator menu items of a jqGrid on a web app’s UI were jumping around on hover, making it practically impossible to select one.

  

Seems this had started occurring on that ASP.net MVC web application, after a recent update to the latest jQuery-UI NuGet package.

Probably the issue wouldn’t occur if it wasn’t using the older free version of jqGrid. Will probably transition it eventually to free-jqGrid, the free fork (and quite evolved since forked) of the older free version of jqGrid, since jqGrid’s newer version is now commercial.

For the time being, I ended up adding this fix to Content/Site.css of the ASP.net MVC webapp:

/* jqGrid search operator menu item hover (uses jQuey-UI) */

a.ui-corner-all.g-menu-item.ui-state-hover {
    border: 1px #cccccc !important; /* fix for Chrome: removed "solid" (was causing hovered items to resize and menu to relayout, making it too hard to select them */
    /*border: 1px solid #cccccc;*/ /* this is used by jQuery-UI for .ui-state-hover */

    color: blue; /* showing blue color for hovered over menu text, should show better than a hover border since selected item already has a border itself */
}

This also has the added extra that on hover it shows the hovered item’s text in blue: