I have updated today my Chrome to version 19 and could reproduce the problem described here. I wrote my suggestions in my answer on the question. I post it here too.
As quick fix of the problem one can change the line
Post edited 09:56 – 17/05/2012 by tony Post edited 09:58 – 17/05/2012 by tony Post edited 11:56 – 17/05/2012 by tony Post edited 11:57 – 17/05/2012 by tony
Post edited 17:33 – 17/05/2012 by OlegK Post edited 17:34 – 17/05/2012 by OlegK Post edited 18:22 – 17/05/2012 by OlegK
Hallo Tony,
I named my suggestion at the beginning as quick and dirty solution, so I full agree that it would be fine to find in the future more better way. Nevetheless I don't think that the code which you wrote above will work correctly.
The first problem with above code is that ts.p.cellLayout can be set to 0. So the width of the table will be also 0. You fixed already the problem in the code of cellWidth function which can be find in the code of jqGrid on the github. The function contain the following code now:
cellWidth : function () { var testcell = $("<div class='ui-jqgrid'><table class='ui-jqgrid-btable' style='width:5px;'>" + "<tr class='jqgrow'><td style='width:5px;'></td></tr></table></div>").find("td").width(), ret = ( testcell != 5); testcell = null; return ret; }
I think that the $.jgrid.cellWidth() function returns always false. To be sure I tested it in Chrome 18 and verify that it is really so. The problem is that one uses disconnected DOM fragment. So the jQuery.width() will just get the value from the CSS style. If you would replace at the end of expression for testcell from .find("td").width() to .width() you will get 0 as the result (div has width 0). If you would remove style='width:5px;' from table element of the expression and use .find("table").width() you will get 0 too.
I think that testing (feature detection) is in general the better way. It will be possible to implement, but I think it will be need more large changes in jqGrid. I suppose that one could use jQuery.width for example for all calls from the first row, sum all the widthes and set the table width based on the value. The way has advantage that it will be used the real table (grid), so even if the user added some additional CSS classes which increase for example padding in the cells or even if the CSS used grid id only, the approach will work. The main disadvantage of the approach is the creating of the grid inside of hidden div. For example if one have jQuery UI tabs and want to create grid on the tab which currently hidden, than I suppose that all widthes will return 0.
In my original I suggested to use parseFloat($.browser.version). The main idea was to provide a solution which work correctly in Chrome and which work exactly as before on all other browsers. We can't test the new version in all other old browsers. So I wanted to have minimal changes for all other browsers. It was just pragmatical way.
Probably one can improve the way by using something like
var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
One can change the value of old isSafari variable so that no changes for Safari will be done:
isSafari = ($.browser.webkit || $.browser.safari) && (window.navigator.userAgent.toLowerCase().indexOf('chrome') < 0 || parseFloat($.browser.version)<536.5) ? true : false; // if Webkit and not Chrome or Chrome, but version < 19
Currently Safari 5.1.7 use more old version of Webkit. The variable window.navigator.userAgent is on my computer
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/536.5 (KHTML, like Gecko) Chrome/19.0.1084.46 Safari/536.5
for Chrome 19 and
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2
for Safari 5.1.7. If one will see that the same problem as Chrome 19 will be have the nex version of Safari one could ajust the calculation of isSafari variable to for example the original value which I suggested.
Later if one will find better and safe way one can make more changes, but I think that your current suggestion Tony works not correct.
Like corrently mention Justin (see here) the code still work incorrectly if the page has some existing <td> element on the page. I posted my suggestion in the comment. In any way we are very close to fixing of the problem.
Like corrently mention Justin (see here) the code still work incorrectly if the page has some existing <td> element on the page. I posted my suggestion in the comment. In any way we are very close to fixing of the problem.
Best regards Oleg
Hi to all,
i'm using jqGrid 3.8.2, but i've done a backporting of some functions of 4 version (setGridWidth, ShowHideCold, setColWidth), and i tested the original fix of tony (without lastest change) in Chrome 10, 18 e 19 without problem.
You could see on the demo like this one that the fix do work. If you can provide the demo which use new code and work incorrectly then one can improve the fix. If I read just "it works not at me" I fill that I speak with a child. Sorry, but it's so. You are not the only person who posted me such kind of issues. I beleve you that there are more problems as fixed now, but without having test case which reproduce the problem we can't fix it.
So in the future I will just ignore any such posts or e-mails where no code are posted and no test case is provided. Sorry, bur I see no other way.
Thank you for information about Chrome 20 beta. I used information from wikipedia where (at least till now) one find that Chrome 20 has 536.6 instead of 536.11. So in my implementation of the fix one should use probably something like <536 instead of <536.5. It's interesting whether the same problem will exist in the next version of Safari and so it's really the change in Webkit.
If one uses the approch suggested by Tony (and implemented already in the current code of jqGrid on github) the problem with Chrome 20 beta is not exist.
Best regards Oleg
P.S. @Tony: It would be fine to publish new version of jqGrid which would include all the last fixes.
Post edited 18:01 – 02/11/2012 by Albertz Post edited 18:02 – 02/11/2012 by Albertz
Hello,
I am using jqGrid 4.4.1 and have this problem, not only on any specific browser, all four of them (although in different ways.)
Is this really related to the rendering engine?
As I see it, the code contains the line:
if(rowInd===0) { result += "width: "+grid.headers[pos].width+"px;";
I am guessing, but does this code take the width from the definition? This code writes the width to the header cell and later on the total of the columns' width is written to the various layers.
Then in the ui.jqgrid.css there are definitions for ".ui-jqgrid .ui-jqgrid-htable TH" and ".ui-jqgrid TR.jqgrow TD" which add 2px to the left and the right of the cells and then there is 1px for the collapsed border of the table. I found this because I have one table with 13 columns and one table with three columns, the rendered difference (of the cells) is 50 pixels i.e. 5 pixels per column.
The written total width for the various layers however doesn't seem to take into account the padding in the css. This discussion about getting values from the css may help: Stackoverflow.
Login 
Register 
Search 
Forum
Print this Post 
Topic RSS 
