Issue about column design


sometimes when i open / close lightbox , columns become bad stylesd like in this picture, and the add button is hiden
Best regards



the grid can look that way when there are NaN values in columns widths, which can be either result of the misconfiguration or a sign of a bug on our end.

You can check it by evaluating gantt.config.columns in browser console - . The columns object reflects the live state of the Gantt grid, you’ll likely see the NaN values there. he next step is to find out how the invalid values get there.

Can you please share your configuration code, or even better, a complete sample that we could use to reproduce the issue?
You can create a sample in our snippet tool (modify the code, click “Share”, and copy the link that will appear)


Thanks Aliaksandr for reply, as you said i don’t have width attribute for some columns , i hope add it will solve the problem
here my columns configScreenshot%20from%202020-06-16%2010-36-02


Hi Ahmed,

thanks for the info.
It this how the columns config looks like after the gantt is displayed on the page?
I can see that columns don’t have calculated widths, which is unusual. Gantt calculates and assigns column widths in the pre-render phase and then grid renderer uses these values to generate grid html.

I’ve just checked a simple example and this is how columns object should look like normally (note the button above the gantt).

Do you change columns configuration from code?
Please share some example where the issue can be reproduced


Hello again ,
this config is made by me ,it persists after gantt is displayed ,i added min_width, max_widh and with for each column ,and it works fine until now


Hello Ahmed,
I remember that Gantt had that bug, but it should be fixed in the 6.3.4 version:
If you have a newer version, please share a snippet where the issue can be reproduced.


Another thought,
such an issue may occur if you reset gantt.config.columns in the middle of the rendering phase.
For example, if you assing this config inside a template or gantt.addTaskLayer function:

gantt.templates.task_class = function(start, end task) {
   // ...

   gantt.config.columns = [ ... ];

   // ...
   return "task-class";

this is a relatively common misconfiguration.
Gantt calculates column sizes before rendering rows of the grid, and the columns config stores widths that match what you see on the screen. If you reset the columns config from the template, gantt won’t recalculate them (since this is not a valid configuration scenario), and columns will be rendered with invalid sizes.
Generally, templates must not modify any settings and other configurations, they should only return values.

You can check where the columns config is assigned in your code, and if such assignment happens inside a template of gantt.addTaskLayer function - just move that code out of the function. You can assign configs before gantt.init , from onGanttReady event, or before any call of gantt.render