jqGrid does not render correctly in Chrome/Chrome Frame

Question

Currently using Chrome v19.0.1084.46 (Official Build 135956) beta-m jqGrid 4.3.2 (latest release)

The problem is that no matter the size of my grid, columns, or containing div, a small fraction of my last column gets pushed beyond the edge of the grid, causing horizontal scroll bars to appear, which should not happen. See below:

I've been fiddling with the following attributes on jqGrid to try and fix this:

• width
• autowidth
• height
• shrinkToFit
• scrollOffset - Had the best luck with this one, but nothing repeatable.

I've also stripped down to the basic grid css only, thinking it might have been a rule I put in place...with no luck.

Has anyone else experienced this and/or found a solution to this? Help is much appreciated.

Answer 1

I updated today my Chrome to version 19, have reproduced the problem and made the corresponding quick&dirty fix:

I suggest to change the line of jqGrid code

isSafari = $.browser.webkit || $.browser.safari ? true : false; 

to the following

isSafari = ($.browser.webkit || $.browser.safari) &&     parseFloat($.browser.version)<536.5 ? true : false; // Chrome < version 19 

The demo use the fix. The fixed version of jquery.jqGrid.src.js which I used in the demo you can get here.

I tested it in IE9 (v9.0.8112.16421), IE8 (8.0.6001.18702CO), Chrome 18.0.125.168, Chrome 19.0.1084.46, Safari 5.1.7 (7534.57.2), Firefox 12, Opera 11.62. In all the web browsers the demo has no horizontal scrollbars and it looks as following:

In the future it would be better to change the calculation of width of the grid more deep to have no direct dependency from any version number or web browser. I hope it will be possible if one would use more jQuery methods $.width and $.outerWidth in some places of jqGrid. In any way I hope that the above described fix would be already helpful for many jqGrid users.

UPDATED: I posted my suggestion to trirand as the bug report.

UPDATED 2: To be exactly there are three places in the code where are used the same $.browser.webkit || $.browser.safari construct as described above: inside setGridWidth, inside of getOffset, inside of calculation of the width of multiselect column, inside showHideCol and inside setGridWidth. The first three places uses isSafari variable. The last two places uses $.browser.webkit || $.browser.safari directly. One should replace in all the places the code

$.browser.webkit||$.browser.safari 

to

($.browser.webkit || $.browser.safari) && parseFloat($.browser.version)<536.5 

So one should do this in three places:

1. at the definition of the isSafari (see me original post)
2. inside of showHideCol
3. inside of setGridWidth

You can download the fixed version of the jquery.jqGrid.src with all the fixes here. You can make the same changes in the code of jquery.jqGrid.src yourself if you have to use old version of jqGrid. To created minimized version for the production you can use any minimizer which you good know. I use for example Microsoft Ajax Minifier 4.0. Just install it and execute

AjaxMin.exe jquery.jqGrid.src-fixed3.js -o jquery.jqGrid.min-fixed3.js 

As the result you will get jquery.jqGrid.min-fixed3.js which will be even smaller as original jquery.jqGrid.min.js. Even if you add the comment header to the file (see modified file) the file will be still smaller as original version of jquery.jqGrid.min.js.

After some iterations of my bug report and the improvements there are one more version of the fix where the method cellWidth was introduced:

cellWidth : function () {     var $testDiv = $("<div class='ui-jqgrid' style='left:10000px'><table class='ui-jqgrid-btable' style='width:5px;'><tr class='jqgrow'><td style='width:5px;'></td></tr></table></div>"),         testCell = $testDiv.appendTo("body")             .find("td")             .width();         $testDiv.remove();         return testCell !== 5; } 

See here. If you prefer to follow the way you can do this also. In the case in all places where isSafari or $.browser.webkit || $.browser.safari (in showHideCol and setGridWidth) are used you can use $.jgrid.cellWidth() instead.

UPDATED 3: Today was published jqGrid 4.3.3 which contains the fix which I described above (the cellWidth method). So I recommend all to use the new version.

UPDATED 4: Google Chrome 20 uses WebKit 536.11. So everybody who can't use the last version of jqGrid with the fixed calculation of the width should use parseFloat($.browser.version)<536.11 (or some close) instead of parseFloat($.browser.version)<536.5 described at the beginning of the answer. Google Chrome 23 WebKit uses 537.11.