Gantt Layout Drag Resize

Gantt
#1 
gantt.config.layout = {
            css: "gantt_container",
            rows: [
                {
                    cols: [
                        {
                            width: 700,
                            min_width: 700,
                            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"}
                    ]
                },
            ]
        };

The code above shows my layout configuration. I noticed that when I drag the resizer to the right, the left grid adapts, but when I drag it to the left, the left grid doesn’t resize each column.As shown in the figure.

image

#2

Hello @wqh,

You need to enable the gantt.config.grid_elastic_columns = min_width config so the columns shrink when reducing the grid width until they reach their minimal width. When all columns reach minimum, the horizontal scroll will appear in the grid.

Please check an example: DHTMLX Snippet Tool.

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer