Scrollbars in Firefox not working

Gantt
#1

We noticed that in several cases, if the Gantt chart is embedded inside an iframe and the content causes it to have vertical and horizontal scrollbars, the scrollbars won’t respond to dragging and clicking on their arrows is quite slow.

#2

Hello Subri,
In our snippet tool, Gantt is loaded inside the frames:
https://snippet.dhtmlx.com/5/1b8459ceb
When I use Firefox, I can successfully scroll the chart and I don’t see any issues:
https://files.dhtmlx.com/30d/854e80b8133ed3690ddaf05127b736e1/vokoscreen-2020-11-13_13-22-50.mkv

Please, send me a ready demo so that I can reproduce the issue locally.

#3

Hello ramil,

Here’s a demo you can try out.
https://github.com/voroshagyma/gantt_bug_in_ff

It might be a Firefox bug, though.

#4

Hello Subri,
Thank you for sending the demo.
I couldn’t reproduce the issue with vertical scrollbars. I tried scrolling with the mouse wheel and by dragging the scrollbars:
https://files.dhtmlx.com/30d/203f69ebf6f12f4d21c7505d54120400/vokoscreen-2020-11-17_17-52-08.mkv

The issue with the horizontal scrollbar is reproduced, and it is not related to Firefox. When the container is too small and there is only the grid, the timeline is not displayed. By default, the horizontal scrollbar is attached only to the timeline. It is actually scrolled:
https://files.dhtmlx.com/30d/4466c64074e89ca61c9f6448422438e1/vokoscreen-2020-11-17_17-57-44.mkv
We are aware of the issue the grid is not resized when you change the Gantt container size. The dev team will fix it in the future, but I cannot give you any ETA.
However, in your case, with such small sizes, it is expected that you won’t see the timeline.
If you want to see only the grid and make it scrollable, you need to change the layout configuration:
https://docs.dhtmlx.com/gantt/desktop__layout_config.html#scrollbar
Here is an example of the layout configuration that you can use:

        gantt.config.layout = {
            css: "gantt_container",
            rows:[
                {
                cols: [
                    {
                    // the default grid view  
                    view: "grid",  
                    scrollable: true,
                    scrollX:"scrollHor", 
                    scrollY:"scrollVer"
                    },
                    {
                    view: "scrollbar", 
                    id:"scrollVer"
                    }
                ]},
                {
                    view: "scrollbar", 
                    id:"scrollHor"
                }
            ]
        }
#5

Ugh, you are right, for some reason I can’t reproduce it with my own example …
However, in my environment I was able to “fix” this by closing the developer console before scrolling.

#6

Hello Subri,
The dev team fixed the bug with the Gantt container resize. Now, the vertical scrollbar should be visible even when the grid doesn’t fit the Gantt container width:
https://docs.dhtmlx.com/gantt/whatsnew.html#716
You can see that the bug is no longer reproduced in the following sample:
https://snippet.dhtmlx.com/5/4fde31b1d