Horizontal scrollbar not working properly in Chrome

I am evaluating dhtmlxGrid for use with our product. Since we have a good deal of custom features already in our tables, I am using the method of declaring our tables to be of class “dhtmlxGrid”. After some amount of work, everything works except for one feature – horizontal scrolling of the table in Chrome. I’ve tested with IE8, IE9, and FireFox as well and don’t see this problem.
For tables beyond the enableAutoWidth bound, a horizontal scrollbar is rendered in Chrome, but when you try and pull it to the right, it just springs back. Is this a known problem? Vertical scrollbars work fine in Chrome and in the other browsers.

Here is a condensation of the code that I am using. Note that I have an “isChrome” workaround to avoid horizontal scrollbars entirely in Chrome.

<table name="gridTable" class="dhtmlxGrid" onbeforeinit="beforefunc()" oninit="initfunc()" imgpath="/resource/dhtmlxGrid/codebase/imgs/" lightnavigation="false" ...

Unfortunately the issue cannot be reconstructed locally.
Your code works well for us in Chrome.

If issue still occurs - please, provide a complete demo where the issue can be reconstructed.
Here you can find a tutorial:
docs.dhtmlx.com/doku.php?id=othe … leted_demo


Thanks for the reply and the pointer to the correct way to prepare a demo. I’d like to pare down the code as much as possible, but given that you were unable to reproduce with the “sketch” I provided, I probably will include a good deal of our table code, css, etc. in case the problem is due to some interaction between our code, dhtmlx code, and maybe even the version of jquery.js we are using.

After all this code is assembled under one directory, is the correct procedure to zip it up and attach the file to my next post?

You may attached the the zipped demo here in your post or send me a private message with the attached demo.

Well, now that I have isolated all the code and resources in one directory, I don’t see the problem. But, the difference is that in my demo page code (index.html), all the data for the table is filled in, as opposed to being generated from in-memory objects in my application. This leads me to believe that there is some kind of timing problem, and that somehow Chrome tries to render some things before the table data has been fully populated, and thus the scrollbar malfunction. As I’ve said earlier, I don’t see the problem in either IE or FF.

I’ve figured out what the problem was: on that particular browser page in Chrome I had zoomed out (made characters smaller) relative to the default. This apparently confused Chrome in terms of horizontal scrolling.

Is this an issue that is planned to be fixed? The exact problem is: When using Google Chrome zoomed at 90%, the horizontal scroll bar in the DHTMLX grid jumps back to the left when scrolling right. You can recreate this on any grid, even the example one on dhtmlx.com: dhtmlx.com/docs/products/dht … ndex.shtml

When zoomed at 100% or 75%, this is not an issue. Just curious if this can be fixed because I have users reporting this issue on our tool which uses DHTMLX Grid and I want to be able to tell them either:

“This is a known issue and they are working on a fix.”
“This is a known issue and there are no plans to fix it any time soon.”

Thank you so much.


This is the known issue, but unfortunately we’re not planning to fix it in the near future.
You may try to disable the autoscroll in the grid to escape the issue.

This was a few years ago now, has it been fixed since?

the issue cannot be reproduced using the latest version of dhtmlx.

I’m using Chrome right now and see this problem on this example:
dhtmlx.com/docs/products/dhtmlxG … _menu.html

I’m zoomed at %100. The problem doesn’t happen in IE or Edge.

It only happens if you use the right or left scroll arrows (click them). If you drag the scroll bar then it’s fine.

I was able to fix it by commenting out this function in dhtmlxgrid.js:
this.hdrBox.onscroll = function()

This workaround fixes it for me, but I guess if there is a case when you need the user to scroll the header box manually (maybe touch?) then this solution won’t work.

Unfortunately it’s still not available to reproduce the problem.
The provided sample works well for me in Chrome. scroll arrow buttons work well.