Why Does My jqGrid's Last Column Extend Beyond the Grid in Chrome, and How Can I Fix It?

jqGrid in Chrome: Oversized Last Column Issue

jqGrid, a JavaScript library for data display, has a peculiar rendering issue when used with Chrome or Chrome Frame. The last column of the grid extends beyond the boundaries, forcing horizontal scrollbars to appear. This distortion occurs regardless of the grid's size.

Diagnosis and Troubleshooting

The root cause of this issue lies in a mismatch between the width calculation of jqGrid and Chrome's internal settings. To resolve it, a modification to the jqGrid code is necessary.

Solution Updates

The fix involves updating the following line of jqGrid's code:

isSafari = $.browser.webkit || $.browser.safari ? true : false;

to:

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

Updated Code

Here's the updated code for the isSafari check:

if (isSafari) {
    chromeVersion = parseFloat($.browser.version); // Later Chrome versions using WebKit will fall below the threshold
    if (chromeVersion<536.11) { // Chrome 20 uses 536.11 (Change as browsers change)
        isSafari = true; // Only early Chrome requires the correction
    } else {
        isSafari = false;
    }
}

Testing the Fix

Tests across various browsers (IE9, IE8, Chrome 18-23, Safari, Firefox, Opera) confirmed that the updated code resolves the issue. The grid now renders correctly with no excessive width on the last column.

Credit and Enhancements

The original fix was suggested by trirand, the developer of jqGrid. Subsequently, the code was refined to include compatibility with later versions of Chrome that use higher WebKit versions.

With the updated code, users can utilize jqGrid seamlessly in Chrome and Chrome Frame without encountering the problematic column width issue.

The above is the detailed content of Why Does My jqGrid's Last Column Extend Beyond the Grid in Chrome, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!