Home > Web Front-end > CSS Tutorial > How to Fix jqGrid Horizontal Scrollbar Issues in Chrome?

How to Fix jqGrid Horizontal Scrollbar Issues in Chrome?

Susan Sarandon
Release: 2024-12-10 20:05:17
Original
942 people have browsed it

How to Fix jqGrid Horizontal Scrollbar Issues in Chrome?

jqGrid in Chrome: Resolving Horizontal Scrollbar Issue

jqGrid users encountering horizontal scrollbars in Chrome despite adjusting various grid attributes can often be attributed to a compatibility issue with Chrome versions 19 and above.

In version 19, Chrome uses a different calculation for its rendering engine, leading to a misalignment in the width of the last column. To resolve this problem, the isSafari variable needs to be adjusted to distinguish between Chrome versions.

Fix:

In the jqGrid code, replace the line:

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

with the following:

isSafari = ($.browser.webkit || $.browser.safari) && parseFloat($.browser.version) < 536.5 ? true : false;
Copy after login

Additional Considerations:

  • This fix affects three places in the code: definition of isSafari, showHideCol, and setGridWidth.
  • jQuery 4.3.3 includes the fix in its cellWidth method.
  • Chrome versions 20 and above use WebKit 536.11, so update the conditional statement accordingly if using an earlier jqGrid version.

By implementing this fix, users can ensure that their grids render correctly in all supported web browsers, including the latest versions of Chrome.

The above is the detailed content of How to Fix jqGrid Horizontal Scrollbar Issues in Chrome?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template