How to Maintain 50% Proportional Layout Between Gantt Table and Tasks on Both Small and Large Screens?

[xkfe]

Hi, I'm working with DHTMLX Gantt and I need to ensure that the Gantt chart's task area and the table (with task details) always take up 50% of the screen width, regardless of whether the screen is small or large.

Currently, the layout is responsive, but I am struggling to set a fixed proportion between the task chart and the table so that they both occupy 50% of the available screen width on all devices.

Any help or code examples would be greatly appreciated!

Thanks in advance!

[MaksimLakatkouXBPL]

Hello. You can achieve this by getting the total width of the Gantt container and assigning half of it to the grid using the grid_width property.

gantt.config.columns = [
    { name: 'text',       label: 'Task name',  tree: true, width: '*' },
    { name: 'start_date', label: 'Start time', align: 'center' },
    { name: 'duration',   label: 'Duration',   align: 'center' },
    { name: 'add',        label: '' },
];

gantt.attachEvent('onGanttRender', () => {
    const containerWidth = gantt.$root.offsetWidth;
    const tableWidth = Math.round(containerWidth / 2);
    gantt.config.grid_width = tableWidth;
});

Here’s an example: https://snippet.dhtmlx.com/z994berx