InMethodGrid horizontal scroll broken in Chrome (with workaround)

[rototor]

With 7.1.0 the horizontal scroll is broken in Chrome. I.e. Grids with more columns as fitting on the screen have no scrollbar and don't scroll. Don't ask my why this is happening, it worked without problems with 6.14.

To fix it I use this javascript to workaround the problem:

    if (Wicket.Browser.isChrome()) {
        /*
         * Workaround for scrollbug in Chrome...
         */
        $("head").append("<style>.imxt-form{overflow:auto}</style>");

        var updateInternal = InMethod.XTable.prototype.updateInternal;
        InMethod.XTable.prototype.updateInternal = function() {
            if (!updateInternal.call(this))
                return false;
            var headContainer2 = this.getElement("div", "imxt-head-container2");
            var form = this.getElement("form", "imxt-form");
            headContainer2.scrollLeft = form.scrollLeft;
            return true;
        };
        var attachEventHandlers = InMethod.XTable.prototype.attachEventHandlers;
        InMethod.XTable.prototype.attachEventHandlers = function() {
            attachEventHandlers.call(this);
            var headContainer2 = this.getElement("div", "imxt-head-container2");
            var form = this.getElement("form", "imxt-form");
            if (form.imxtAttached != true) {
                $(form).on("scroll", function() {
                    headContainer2.scrollLeft = form.scrollLeft;
                });
                form.imxtAttached = true;
            }
        };
    }

This is monkey patching the problem, which is ugly but works for me. I have currently not the time to develop a correct fix, maybe in some weeks. If somebody else has the problem with Chrome he can use this workaround till a proper fix is developed.

[martin-g]

Thank you for sharing this!

[rototor]

I had to extend the workaround, as this did not work when the InMethodGrid was in nested in a form...

This is my current version of the workaround:

if (Wicket.Browser.isChrome()) {
        /*
         * Workaround for scrollbug in Chrome...
         */
        $("head").append("<style>.imxt-form{overflow:auto}</style>");

        InMethod.XTable.prototype.getChromeScrollForm = function () {
            try {
                return this.getElement("form", "imxt-form");
            } catch (e) {
                try {
                    return this.getElement("div", "imxt-form");
                } catch (e) {
                    /*
                     * When the datagrid is nested in a form, wicket does not create a second form.
                     */
                    return null;
                }
            }
        };
        var updateInternal = InMethod.XTable.prototype.updateInternal;
        InMethod.XTable.prototype.updateInternal = function () {
            if (!updateInternal.call(this))
                return false;
            var form = this.getChromeScrollForm();
            if (!form)
                return true;
            var headContainer2 = this.getElement("div", "imxt-head-container2");
            headContainer2.scrollLeft = form.scrollLeft;
            return true;
        };
        var attachEventHandlers = InMethod.XTable.prototype.attachEventHandlers;
        InMethod.XTable.prototype.attachEventHandlers = function () {
            attachEventHandlers.call(this);
            var form = this.getChromeScrollForm();
            if (!form)
                return;
            var headContainer2 = this.getElement("div", "imxt-head-container2");
            if (form.imxtAttached != true) {
                $(form).on("scroll", function () {
                    headContainer2.scrollLeft = form.scrollLeft;
                });
                form.imxtAttached = true;
            }
        };
    }