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.

Lannylanolin

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.

Gaulish

tried to implement the fix, doesnt seem to fix the issue for me. – Phylloid

Worked for me. Thanks as always Oleg! – Lannylanolin

@user648929: Just try to use the fixed version of jquery.jqGrid.src.js. If it will still not work for you then you should better post the code which can be used to reproduce you problem. I think it's better to do this in new question. If I will be able to reproduce the problem I could try to fix it. – Gaulish

the problem is my grid width is totally messed uplink – Phylloid

@user648929: I can't debug pictures! To make new fix which would work in your case I need to have the demo which reproduce the problem. You should post JavaScript code which reproduces the problem. – Gaulish

Oleg, your fix is working but not when someone uses the grouping function on their grid. – Rockrose

Oleg - I could not get your fix to work, but was able to apply Tony's recent fixes to take care of the problem: github.com/tonytomov – Kingpin

@JustinEthier: It would be helpful to have a demo which not works. I don't think that last Tony's changes are correct: see the post. – Gaulish

@JustinEthier: Could you provide the demo which not work? The best would be if you would include the version of jqGrid.src.js in the demo? I believe that my original fix work not for all different settings of jqGrid, but to provide the better fix I need have at least one test case where my original fix not work. – Gaulish

@Gaulish - I'll take another look at it. My applications are using jqGrid 4.0.0 so that could be part of the problem. But applying Tony's fixes seemed to fix the problem in all major browsers. From what you are saying, though, it looks like it would be broken in Chrome 18, and possibly other older browsers? – Kingpin

@JustinEthier: I wrote only that cellWidth function returns always false. So setColWidth should have inside of setColWidth always as brd = ts.p.cellLayout which is other as the previous version of jqGrid. I have not enough installations of the old web browsers to make tests. In any way could you provide a demo which not work with my fix? – Gaulish

@JustinEthier: Just now Tony changed the implementation of cellWidth. Probably now all will work correctly? – Gaulish

I tested this change in jqGrid 4.0.0 / jQuery 1.6.1 - it actually makes things worse. The function always returns true in IE, FF, and Chrome 19 so all of these browsers show the horizontal scrollbar. – Kingpin

See my comment to Tony's latest change: github.com/tonytomov/jqGrid/commit/… – Kingpin

@JustinEthier: You are right! There are still a bug exist in the current code of cellWidth function. I think I could improved the code a little. Look at my comment. – Gaulish

@Gaulish - Your latest version works great, thank you! By the way, sorry for not providing a working demo earlier, but it seemed we were all converging on the right solution and it would be a fair amount of work to extract a working example from this application. Another time, perhaps... – Kingpin

@JustinEthier: You are welcome! No problem with the demo. By the way you wrote about version 4.0.0, so I supposed that you tried to impalement the same in jqGrid 4.0.0 instead of 4.3.2. In general it could work, but I can imagine that it works do in another way. In any way the most important that we have now at least one (probably more as one) possibility to fix the code in new version of Chrome. It's the most important. – Gaulish

@Oleg: Any suggestions for people using older version(4.1.2) of jqgrid? cellWidth function doesn't even exist in my ver. I tried the above isSafari trick but didn't work on Chrome 19.0.1084.46 – Anopheles

@justcurious: I am tied to repeat, that if somebody write that the fix not work for some grid and in some jqGrid version he should provide corresponding details or better the demo which can be used to reproduce the problem. Look at the demo where I make my original fix on jqGrid 4.1.2. It works in Chrome 18 and 19. – Gaulish

@Anopheles - See my answer; it may be easier to apply the diffs directly. This worked for me on jqGrid 4.0.0 so presumably it will work for you as well. – Kingpin

@JustinEthier: Thanks! the changes inside showHideCol and setGridWidth did the job. I could have sworn i read all the above answers yesterday and tried to apply them. My tired eyes must have missed those two other places. – Anopheles

@Oleg, Sorry I didn't read this comment thread fully... If I use latest version jqGrid(4.3.2), is this issue will be solved? – Launcelot

@vissupepala: No. The problem exist in all versions of jqGrid which are currently released. So You have to implement some from described above fix to have better support of Chrome 19. – Gaulish

@Oleg, Thank you, I will use your solution, which you have fixed and given as new js source file. I tried your solution for a sample grid it is working fine and fixing the scroll bar issue. Thank you again for your good solution. – Launcelot

i upgraded to 4.3.3 and this is no longer an issue. – Gateshead

@Steve: It's correct. It was one from the most important reason why the 4.3.3 was published. I asked last week Tony to do this, but he was busy and published 4.3.3 only today. I'll add "UPDATED 3:". – Gaulish

FWIW, I found I was still having the issue, even after updating to 4.3.3, till I removed this from my CSS: .ui-jqgrid table { border-collapse: collapse; } – Catima

@Gaulish & Steve, Thank you... I was changed to 4.4.0 and no issues, looking good. Thank you again. – Launcelot

@Oleg, I am having another problem now. If I Zoom out the page on browser grids are showing scroll bar. I have asked new question here: #11154757. Can you suggest any solution. – Launcelot

We use jgGrid 4.3.3 and cellWidth didn't solve the issue...in order to solve it, I added the line return parseInt(testCell) !== 5; instead return testCell !== 5; in cellWidth method. Maybe it's not the best solution, but it works for us :) – Rachaba

@AlexDn: I had also close problems which I described in the feature request. The feature request (or some alternative implementation) is still not implemented in the main code of jqGrid. – Gaulish

Hm, your link points to execatly the same line :) I countinued to test the grid with zoom, and found that when zooming to 175%+, the problem exists again. So I went to cellWidth function and changed return parseInt(testCell) !== 5; to just return false;. Now it looks like it workes in all zoom, but I don't know yet if it makes problems in other places. – Rachaba

How did you know that Google Chrome 20 uses Gecko 536.11? Don't they use webkit? – Kob

@FranzSee: I don't understand your question. The User-Agent HTTP header informs us about the used engine: For example Chrome 23 contains AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.95 Safari/537.11. What I mean is the number "537.11" in User-Agent. It's of cause the version of WebKit and nothing more. To remove any misunderstanding I fixed the text of "UPDATED 4" part. Here one see for example the list of WebKit versions which uses every version of Google Chrome. – Gaulish

for me the cellWidth function fixed the problems with chrome but introduced the same problem for IE (which didn't exist before), so I added a check in the method so it returns false for IE and now it works well. (IE 8, not sure about other versions), Thanks! – Entablature

@SuperShalabi: Probably you have problem which I described here? Which version of jqGrid you use? Which value have zoom? Which DPI setting are set in Windows? – Gaulish

@Oleg: actually I use windows XP I don't know if it has the same DPI stuff from windows 7, and I use version 4.4.4. I was using version 4.3.1 and it was working perfectly in IE but had the scroll issue with chrome and when I upgraded it was fixed for chrome but broken for IE. – Entablature

@SuperShalabi: You should understand that the information which you posted is not enough to reproduce your problem. You don't answered on my questions too: Which value have zoom in IE during the experiments? Which DPI setting are set in Windows? You can repeat your tests with jquery.jqGrid.src.js, set breakpoint on [the line] (github.com/tonytomov/jqGrid/blob/v4.4.4/js/grid.base.js#L202) and examine the value of testCell. Then you can replace return testCell !== 5; to return Math.abs(testCell – 5) > 0.1; like I suggested before. – Gaulish

Answer 2

Oleg's solution worked for me.

I just edited the min version

line 49:

replaced:

m=b.browser.webkit||b.browser.safari?!0:!1

with:

m=(b.browser.webkit||b.browser.safari)&&parseFloat(b.browser.version)<536.5?!0:!1

Thanks for the help!

Nmr

Just wanted to add that this is not a generalized solution. If it works for you then great, but you may want to have a look at Oleg's updates and more recent answers. – Kingpin

Answer 3

Oleg's answer is correct. However, if you are using an older version of jqGrid and want to apply these fixes, it may be easier to take the changes directly from the diffs on Github. I have tested this successfully using jqGrid 4.0.0, so presumably it will work on any of the 4.x series.

Just start with the first diff and apply each of them in order. This will add the cellWidth function and make all of the necessary changes across the jquery.jqGrid.src.js file. Then you can use the Google closure compiler if you want to create a minified version:

• 8c56dc8
• b50b55f
• cf26b2c
• 8d7eff0
• 46a14ce

It seems like a lot of changes, but when you look at the actual code the changes will go very quickly. Only a few source lines are affected.

Kingpin

Answer 4

Chrome beta 20.0.1132.11 is out and reports the following:

User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/536.11 (KHTML, like Gecko) Chrome/20.0.1132.11 Safari/536.11

I am guessing 536.11 is evaluating as < 536.5 due to numeric vs text comparison causing the patch not to be operative?

Please help!

Anthropomorphize

The jqGrid online demo's have been updated with the latest version of jqGrid that incorporates Oleg's fix. Do you still see the problem on that page when using Chrome 20? – Kingpin

I'm seeing this bug in Chromium Version 20.0.1132.57 (0). I'm currently using jqGrid 4.4.0. Someone should test Safari 6 which came out recent and change the code to do the crappy behavior for old browsers rather than trying to hack around newer builds which will always keep happening. – Concepcion

This is a comment and not an answer. Also, Oleg's answer already cover this in his "UPDATE 4". – Resolve

Answer 5

Update: My anwswer refers to a similar issue that happened in Firefox a few months ago and I suggested in hopes that it would work for Chrome 19, but currently Oleg's answer is the correct approach.

I had a similar issue a few months ago with FF and I was using the ForceFit option which should disable the HScroll entirely but like you mentioned I would still get it so I just disabled the HScroll for my forcefit grids. A few updates later of FF, it did stop happening, and currently all of my grids are fine in Chrome 18 so hopefully it will not be an issue when 19 is released.

//remove HScroll
function jqGridDisableHScroll(gridid) {
    //if columns are force fit all columns will always fit on screen.
    if ($('#' + gridid).jqGrid('getGridParam', 'forceFit')) {
        var gridview = $('#gview_' + gridid);
        $('.ui-jqgrid-bdiv', gridview).css({ 'overflow-x': 'hidden' });
    }
}

Force Fit

If set to true, and resizing the width of a column, the adjacent column (to the right) will resize so that the overall grid width is maintained (e.g., reducing the width of column 2 by 30px will increase the size of column 3 by 30px). In this case there is no horizontal scrolbar. Note: this option is not compatible with shrinkToFit option - i.e if shrinkToFit is set to false, forceFit is ignored.

Quicksilver

Unfortunately, it doesn't seem to work. The demo'd function successfully removes the scroll bar, but the content is still overflowing the grid area, regardless of the state of shrinkToFit. – Lannylanolin

Well that is unfortunate as I will be in the same boat as you if this problem continues to exist when Chrome 19 is in release. Can you confirm if the grids are having this issue on the demo page trirand.com/blog/jqgrid/jqgrid.html – Quicksilver

Also did you set forcefit to true? – Quicksilver

Yes, I set forcefit to true per the docs. Looks like the problem is there on the demo page. – Lannylanolin

Just to clarify, the issue is with jqGrid and Chrome 19; see Oleg's answer for full details. – Kingpin

Answer 6

Just wanted to point out that this is likely due to webkit issue 78412 finally being resolved. Essentially it would not account for borders, and I believe the padding as well, when calculating the width of tables with a fixed layout.

This meant that jqGrid would incorrectly calculate the width of the table as only the width of its content area. So removing the borders and padding should also solve the problem, but you probably wouldn't want to do that.

Pashalik

Answer 7

We use jgGrid 4.3.3 and cellWidth didn't solve the issue...in order to solve it, I added the line return parseInt(testCell) !== 5; instead return testCell !== 5; in cellWidth method. Maybe it's not the best solution, but it works for us :)

Rachaba

Answer 8

In jQGrid 4.5.2 with Chrome 59.0.3071.115 I changed the cellWidth function in grid.base.js to:

 return Math.round(testCell) !== 5

Nomothetic