Why Does jqGrid Display a Horizontal Scrollbar in Chrome, and How Can It Be Fixed?

jqGrid Rendering Issue in Chrome

In Chrome and its derivative browsers, a minor rendering issue arises with jqGrid, where a portion of the last column extends beyond the grid's boundary. Horizontal scrollbars appear as a result of this rendering error, which is not the desired behavior.

Cause of the Issue

The issue stems from how jqGrid calculates the grid's width based on whether the user agent is Safari or Chrome. However, a bug in Chrome versions below 19 causes an inaccurate calculation, resulting in the improper rendering.

Solution

A fix has been implemented in the latest version of jqGrid (4.3.3). This fix modifies the logic used to determine whether the grid is being rendered in Chrome or Safari. The modified line in the jqGrid code is as follows:

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

By replacing the original line with this modified one, the issue is resolved, and the grid is rendered correctly without any horizontal scrollbars.

Alternate Fix for Older Chrome Versions

For older versions of Chrome (20 or below), where the fix in jqGrid 4.3.3 might not be available, a slightly different condition can be used in place of the one mentioned above:

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

In conclusion, the rendering issue in jqGrid for Chrome is caused by an error in Chrome's rendering engine. The fix implemented in jqGrid 4.3.3 resolves this issue effectively. For older Chrome versions, an alternate condition can be used to achieve the same result.

The above is the detailed content of Why Does jqGrid Display a Horizontal Scrollbar in Chrome, and How Can It Be Fixed?. For more information, please follow other related articles on the PHP Chinese website!