Locking Grid Chrome ColumnLines alignment Issue

Question

In the working example of Locking Grid Column Example we can see white space coming after horizontal scroll bar is scrolled to extreme right. This white space width will be more if number of unlocked columns width is more, which in-turn misplaces column lines (if columnLines:true is given) and looks odd (as shown in Figure).

Surprisingly this is only happening in Chrome.

In other browsers like IE, Safari and Firefox its working fine. May be the new scrollbar style in chrome is causing this issue (where as in IE, Firefox,Safari there is normal scrollbar).

ExtJS Version : 3.4

Browser : Chrome 32.0.1700.19

Answer 1

I think that's the bug that is being discussed on this forum post. The good news is that someone there provided a good fix for it!

Answer 2

Just to quote the answer here (It helps if that forum post is deleted or address is changed) :

/**
 * Override to fix  box-sizing problem in chrome latest versions
 */
if (!Ext.isDefined(Ext.webKitVersion)) {
    Ext.webKitVersion = Ext.isWebKit ? parseFloat(/AppleWebKit\/([\d.]+)/.exec(navigator.userAgent)[1], 10) : NaN;
}
/*
 * Box-sizing was changed beginning with Chrome v19.  For background information, see:
 * http://code.google.com/p/chromium/issues/detail?id=124816
 * https://bugs.webkit.org/show_bug.cgi?id=78412
 * https://bugs.webkit.org/show_bug.cgi?id=87536
 * http://www.sencha.com/forum/showthread.php?198124-Grids-are-rendered-differently-in-upcoming-versions-of-Google-Chrome&p=824367
 *
 * */
if (Ext.isWebKit && Ext.webKitVersion >= 535.2) { // probably not the exact version, but the issues started appearing in chromium 19
    Ext.override(Ext.grid.ColumnModel, {
        getTotalWidth : function (includeHidden) {
            if (!this.totalWidth) {
                var boxsizeadj = 2;
                this.totalWidth = 0;
                for (var i = 0, len = this.config.length; i < len; i++) {
                    if (includeHidden || !this.isHidden(i)) {
                        this.totalWidth += (this.getColumnWidth(i) + boxsizeadj);
                    }
                }
            }
            return this.totalWidth;
        }
    });

    Ext.onReady(function () {
        Ext.get(document.body).addClass('ext-chrome-fixes');
        Ext.util.CSS.createStyleSheet('@media screen and (-webkit-min-device-pixel-ratio:0) {.x-grid3-cell{box-sizing: border-box !important;}}', 'chrome-fixes-box-sizing');
    });
}

This is a override, so just paste this in a separate file as ' lockingGridColumnLinesAlignmentFix.js ' (may be !) and include this file after ext libraries and before your ' app.js ' (in which you have written code for locking grid).