jqGrid does not render correctly in Chrome/Chrome Frame
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:
- at the definition of the
isSafari
(see me original post) - inside of
showHideCol
- 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.
jqGrid 4.4.5 Grid column width rendering issue in Chrome
you can make the same condition here $.browser in jquery 1.9 using following code and use the same solution posted in the link
you can check the browser condition using below code.
jQuery.uaMatch = function( ua ) {
ua = ua.toLowerCase();
var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
/(webkit)[ \/]([\w.]+)/.exec( ua ) ||
/(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
/(msie) ([\w.]+)/.exec( ua ) ||
ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
[];
return {
browser: match[ 1 ] || "",
version: match[ 2 ] || "0"
};
};
matched = jQuery.uaMatch( navigator.userAgent );
//browser = {};
//var cursorType = evt.target.style.cursor;
if(matched.browser.toLowerCase()=="mozilla")
{
}
else
{
}
other wise if you are referring jquery 1.9 and using 1.4 supported codes means u can refer jquery.migrate .js script file in your application.
http://blog.jquery.com/2013/02/16/jquery-migrate-1-1-1-released/
https://github.com/jquery/jquery-migrate/
Thanks,
Siva
jqGrid - columns padding issue in google chrome when use RTL
I can confirm, that jqGrid have some problems with column alignment in case of usage direction: "rtl"
. If you use height: "auto"
option then I would recommend you to use additional CSS rule
.ui-jqgrid .ui-jqgrid-hbox-rtl { padding-left: 0 }
and include additionally include the line
this.grid.hDiv.scrollLeft = this.grid.bDiv.scrollLeft;
inside of loadComplete
and resizeStop
.
The problem is that padding-left: 0
can be used not in all situations. I described the approach how the problem could be solved in my posts to the issue.
I'm developing now new free version of jqGrid, which you can download from here. It contains fixes of to the problem which you described. I recommend you to try the version. It contains many bug fixes and the features like new iconSet: "fontAwesome"
option which improves the look of jqGrid. See some demos at the end of the page. If you would describe me any bugs (in the issues part, or on the stackoveflow) or RTL specific problems (or suggestions to improve RTL look) I would try to improve RTL support in jqGrid.
JqGrid columns getting cut off in IE (scroll bar shows up) but fine (no scroll bar) in Firefox
I suppose that you have the same problem as I described in the bug report. In the case you should change the last line of the internal cellWidth function from
return testCell !== 5;
to
return Math.abs(testCell – 5) > 0.1;
You can do this in jquery.jqGrid.src.js
or just try with the file. It fixed the problem with the wrong calculation of the grid width in my case.
Related Topics
Jquery: Get Selected Element Tag Name
Pass Mouse Events Through Absolutely-Positioned Element
In Jquery, How to Select an Element by Its Name Attribute
How to Bind Events on Ajax Loaded Content
Bootstrap Navbar Active State Not Working
How to Pass Parameter to Function Using in Addeventlistener
Submit Form and Stay on Same Page
Retrieving Html5 Video Duration Separately from the File
Uploading 'Canvas' Image Data to the Server
JavaScript At Bottom/Top of Web Page
How to Detect Which One of the Defined Font Was Used in a Web Page
Fetch(), How to Make a Non-Cached Request
Using Execcommand (JavaScript) to Copy Hidden Text to Clipboard
How to Check Connection Type (Wifi/Lan/Wwan) Using Html5/JavaScript
How to Use External ".Js" Files
Does Ie8 Out-Of-The-Box Have Support For 'Localstorage'
How to Return the Response from an Observable/Http/Async Call in Angular