Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I updated today my Chrome to version 19, have reproduced the problem and made the corresponding quick&amp;dirty fix:</p> <p>I suggest to change <a href="https://github.com/tonytomov/jqGrid/blob/v4.3.2/js/grid.base.js#L937" rel="noreferrer">the line</a> of jqGrid code</p> <pre><code>isSafari = $.browser.webkit || $.browser.safari ? true : false; </code></pre> <p>to the following</p> <pre><code>isSafari = ($.browser.webkit || $.browser.safari) &amp;&amp; parseFloat($.browser.version)&lt;536.5 ? true : false; // Chrome &lt; version 19 </code></pre> <p><a href="http://www.ok-soft-gmbh.com/jqGrid/Chrome19Fix.htm" rel="noreferrer">The demo</a> use the fix. The fixed version of <code>jquery.jqGrid.src.js</code> which I used in the demo you can get <a href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.2_/js/jquery.jqGrid.src-fixed1.js" rel="noreferrer">here</a>.</p> <p>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:</p> <p><img src="https://i.stack.imgur.com/aqer6.png" alt="enter image description here"></p> <p>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 <a href="http://api.jquery.com/width/" rel="noreferrer">$.width</a> and <a href="http://api.jquery.com/outerWidth/" rel="noreferrer">$.outerWidth</a> in some places of jqGrid. In any way I hope that the above described fix would be already helpful for many jqGrid users.</p> <p><strong>UPDATED</strong>: I posted my suggestion to trirand as <a href="http://www.trirand.com/blog/?page_id=393/bugs/fixing-width-calculation-of-the-grid-in-google-chrome-19/#p26607" rel="noreferrer">the bug report</a>.</p> <p><strong>UPDATED 2</strong>: To be exactly there are three places in the code where are used the same <code>$.browser.webkit || $.browser.safari</code> construct as described above: <a href="https://github.com/tonytomov/jqGrid/blob/v4.3.2/js/grid.base.js#L2028" rel="noreferrer">inside setGridWidth</a>, <a href="https://github.com/tonytomov/jqGrid/blob/v4.3.2/js/grid.base.js#L2088" rel="noreferrer">inside of getOffset</a>, <a href="https://github.com/tonytomov/jqGrid/blob/v4.3.2/js/grid.base.js#L2139" rel="noreferrer">inside of calculation of the width</a> of <code>multiselect</code> column, <a href="https://github.com/tonytomov/jqGrid/blob/v4.3.2/js/grid.base.js#L3020" rel="noreferrer">inside showHideCol</a> and <a href="https://github.com/tonytomov/jqGrid/blob/v4.3.2/js/grid.base.js#L3113" rel="noreferrer">inside setGridWidth</a>. The first three places uses <code>isSafari</code> variable. The last two places uses <code>$.browser.webkit || $.browser.safari</code> directly. One should replace <strong>in all the places</strong> the code</p> <pre><code>$.browser.webkit||$.browser.safari </code></pre> <p>to </p> <pre><code>($.browser.webkit || $.browser.safari) &amp;&amp; parseFloat($.browser.version)&lt;536.5 </code></pre> <p>So one should do this in <strong>three places</strong>:</p> <ol> <li>at the definition of the <code>isSafari</code> (see me original post)</li> <li>inside of <code>showHideCol</code></li> <li>inside of <code>setGridWidth</code></li> </ol> <p>You can download the fixed version of the <code>jquery.jqGrid.src</code> with all the fixes <a href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.2_/js/jquery.jqGrid.src-fixed3.js" rel="noreferrer">here</a>. You can make the same changes in the code of <code>jquery.jqGrid.src</code> 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</p> <pre><code>AjaxMin.exe jquery.jqGrid.src-fixed3.js -o jquery.jqGrid.min-fixed3.js </code></pre> <p>As the result you will get <a href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.2_/js/jquery.jqGrid.min-fixed3.js" rel="noreferrer">jquery.jqGrid.min-fixed3.js</a> which will be even smaller as original <code>jquery.jqGrid.min.js</code>. Even if you add the comment header to the file (see <a href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.2_/js/jquery.jqGrid.min-fixed3_.js" rel="noreferrer">modified file</a>) the file will be still smaller as original version of <code>jquery.jqGrid.min.js</code>.</p> <p>After some iterations of my <a href="http://www.trirand.com/blog/?page_id=393/bugs/fixing-width-calculation-of-the-grid-in-google-chrome-19/#p26607" rel="noreferrer">bug report</a> and <a href="https://github.com/tonytomov/jqGrid/commit/3988795bc8d1ac43e349af4eec42f1032f82bb1f" rel="noreferrer">the improvements</a> there are one more version of the fix where the method <code>cellWidth</code> was introduced:</p> <pre><code>cellWidth : function () { var $testDiv = $("&lt;div class='ui-jqgrid' style='left:10000px'&gt;&lt;table class='ui-jqgrid-btable' style='width:5px;'&gt;&lt;tr class='jqgrow'&gt;&lt;td style='width:5px;'&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;"), testCell = $testDiv.appendTo("body") .find("td") .width(); $testDiv.remove(); return testCell !== 5; } </code></pre> <p>See <a href="https://github.com/tonytomov/jqGrid/blob/master/js/grid.base.js#L184-191" rel="noreferrer">here</a>. If you prefer to follow the way you can do this also. In the case in all places where <code>isSafari</code> or <code>$.browser.webkit || $.browser.safari</code> (in <code>showHideCol</code> and <code>setGridWidth</code>) are used you can use <code>$.jgrid.cellWidth()</code> instead.</p> <p><strong>UPDATED 3</strong>: Today was published jqGrid 4.3.3 which contains the fix which I described above (the <code>cellWidth</code> method). So I recommend all to use the new version.</p> <p><strong>UPDATED 4:</strong> 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 <code>parseFloat($.browser.version)&lt;536.11</code> (or some close) instead of <code>parseFloat($.browser.version)&lt;536.5</code> described at the beginning of the answer. Google Chrome 23 WebKit uses 537.11.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload