Search code examples
gantt-chartdhtmlx

How to set a static width for a gantt cell

I'm using dhtmlx gantt component to render a Gantt chart and I need each cell in the timeline to have a fixed width, 10px for example, I tried to use the attribute min_column_width and it does make the columns smaller but it's not using the desired width, is there any way to use a static width?

Here is a snippet https://snippet.dhtmlx.com/5/c4362d05c enter image description here

And I need each one of these cells (the ones of the headers and the ones where the tasks are) to have a fixed width. I appreciate any help or insight on this :) Thanks for reading!

Solution

  • Unfortunately, there is no built-in way to set a fixed timeline cell width. The dev team will try to add that feature, but I cannot promise that. For now, you need to implement a custom solution.

    The timeline cell width depends on several things:

    • The gantt.config.min_column_width parameter.

    • The displayed date range.

    • Gantt container size.

    When there are many cells displayed in the timeline so that all of them won't be able to fit the Gantt container size, Gantt uses the min_column_width parameter and adds a scrollbar. If the cells are able to fit the Gantt container size or even take a smaller size, Gantt stretches them.

    So, to have the exact timeline cell size, you need to increase the visible date range: http://snippet.dhtmlx.com/5/f4f37b79b