Gantt resizer does not work on touch device


#1

We could not move the resizer when we are in touch devices even with the browser stimulation where your mouse cursor turned into a circle, whereas it is working as expected in the Desktop size.

Below is how I config the layout:

gantt.config.layout = {
  css: "gantt_container",
  cols: [
   {
      rows: [
        {
          view: 'grid',
          scrollX: 'gridScroll',
          scrollable: true,
          scrollY: 'scrollVer'
        },
        { view: 'scrollbar', id: 'gridScroll', group: 'horizontal' },
      ],
      width: 200, 
    },
    {resizer: true, width: 1},
    {
      rows:[
        {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
 
        // horizontal scrollbar for the timeline
        {view: "scrollbar", id: "scrollHor", group:"horizontal"}  
      ]
    },
    {view: "scrollbar", id: "scrollVer"}
  ]
};

How can we move the resizer on touch device?

In addition, we have to adjust the grid view smaller on mobile because if we do not then the timeline won’t have any width calculated and we must use autosize ‘xy’, is this normal?


#2

Hello Oliver,
The resizer itself should be working correctly. However, I see that the grid size is not changed.
You need to enable the grid_elastic_columns option:
https://docs.dhtmlx.com/gantt/api__gantt_grid_elastic_columns_config.html
Here is an example of how it works:
https://files.dhtmlx.com/30d/25672df7b683d3e1d7caf80eb64729e1/vokoscreen-2020-11-20_13-05-12.mkv
http://snippet.dhtmlx.com/5/b2d8dffdb


In addition, we have to adjust the grid view smaller on mobile because if we do not then the timeline won’t have any width calculated and we must use autosize ‘xy’, is this normal?

It is a bug that the grid is not resized on the smaller screens. The dev team will fix it in the future, but I cannot give you any ETA.

However, it is expected behavior that on the smaller sizes, you cannot show the whole Gantt chart.


#3

Hi ramil,

Thanks for mentioning on grid_elastic_columns option, since we have one column with a dynamic width we must not use this. However, whether it is on or off we still can not move the resizer bar on touch device which is the main issue.

We are OK with the grid being fixed and not stretched if the resizer goes beyond it on both desktop and mobile.

Still, we still cannot move the resizer on touch device as if we cannot drag it.

We opt to set gantt.config.autosize = 'xy' on touch device with the width of the grid and the Gantt chart are OK as it is on Desktop. However, we want user to be able to drag/move the resizer bar adjusting the view of which they want to see more or close.

In addition, I find out that a class name gantt_noselect is being added to body while dragging the resizer bar which was not added in our case here. when I dragged on it, I can see the body was glowing for a bit but no class had been added so something must have stopped it?

Do you know anything may have prevented us from dragging the resizer?


#4

Hello Oliver,
I can only suggest that you have an old Gantt version that doesn’t have the functionality that allows resizing on mobile devices.
And you need to check that you didn’t disable the touch support:
https://docs.dhtmlx.com/gantt/api__gantt_touch_config.html

Please, try checking if the resizer works on mobile devices in the following sample:
https://docs.dhtmlx.com/gantt/samples/11_resources/09_resource_histogram.html
If it doesn’t work there, please, clarify what device and browser you are using.