Hi,
Is it possible to include margin or offset to the start day of the Gantt chart? My problem is that tasks in the first day start exactly at the line that splits the grid and Gantt control. (Please see screenshot attached)
I would like to add a margin to the first column(if there are any tasks in it), or to the Gantt bars in the first column.
Any suggestions?
As quick solution you can define start and end dates as parameters of gantt.init instead of date range auto-detection
docs.dhtmlx.com/gantt/api__gantt_init.html
You can start a scale as one day before the start time of first task - which will provide the necessary offset.
Hi Stanislav,
That was my first attempt to solve the problem. Unfortunately because I use a scale of month and day, the month name is then also included. (And not just the day number). So in my example it won’t just show 30. (It will include the text September which will make the column width bigger ). This is not the behavior I’m looking for.
I only want a thin left-margin before the start of the first task to indicate that it actually starts on the first day in view.
Any other suggestions?
It possible to change the styling of task bars that they always will have some space before and after task.
Yes, that can probably work, but then I get a border that I need to deal with.(see attached screenshot)I’ve tried setting the gantt.templates.task_class property, but I’m not getting the expected result.
Any ideas?
Note: I override the text property to allow setting the color of the content inside the bar.
Unfortunately I can’t provide a nice solution as well, the best what can be done is next
a) add an extra column to the gantt grid part
gantt.config.columns = [
{name:"text", label:"Task name", tree:true, align:"center", width:170},
{name:"start_date", label:"Start time", align: "center", width:170 },
{ width:20, template:function(){ return ""; } }
];
b) add styles like next
.gantt_grid{
border-right: none;
}
.gantt_cell.gantt_last_cell{
border-left: 1px solid #ccc;
}
It will add some visual space before first column of the timeline part of the gantt.
