Issue with Autofit and Horizontal Scroll

Gantt
#1

Hi,

I am using Gantt v8.0 and facing an issue similar to the one discussed in this post. I have split the horizontal scroll into two parts: one for the grid and one for the timeline. However, when I adjust the grid size, the autofit function does not work as expected. A space appears between the timeline and the grid, even though the autofit option is set to true in my configuration, as shown in the response.

Additionally, when I inspect the gantt object in the console, the autofit option appears to be disabled, despite being explicitly configured as true.

  1. Is there any way to resolve this issue and make the autofit feature work correctly with a split horizontal scroll?
  2. If not, could you guide me on how to capture the resize event and calculate the timeline width? I would like to manually adjust the grid width to address this problem.

Below is the Gantt configuration I am using:

gantt = Gantt.getGanttInstance();

/** config */
gantt.config.show_errors = true;
gantt.config.scale_height = 50;
gantt.config.autofit = true;
gantt.config.columns = [
    { name: "text", label: 'text', tree: true, min_width: 200, resize: true, editor: false },
];

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

gantt.init("ganttArea");
gantt.config.autofit = true;

Thank you for your assistance!

#2

Hello,
I think this issue shouldn’t be related to the autofit config at all. When it is enabled, it adjusts the columns to the available grid width. But when you resize the grid cell that is scrollable, its sizes are not increased.
In the 7.0 version, the dev team added a way to make the grid scrollable and resizable:
https://docs.dhtmlx.com/gantt/api__gantt_grid_elastic_columns_config.html

If you enable the grid_elastic_columns config, you won’t get an empty space between the grid and timeline:
https://snippet.dhtmlx.com/skeoin7t