<!DOCTYPE html><html>
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bin</title>
<link href="https://cdn.jsdelivr.net/npm/jsgantt-improved@2.8.10/dist/jsgantt.css" rel="stylesheet"></link>
<script src="https://cdn.jsdelivr.net/npm/jsgantt-improved@2.8.10/dist/jsgantt.js"></script>
</head>
<body>
<div style="position:relative" class="gantt" id="GanttChartDIV"></div>
<script>
let g = new JSGantt.GanttChart(document.getElementById('GanttChartDIV'), 'day');
g.setOptions({
vShowWeekends: 0, vDateTaskDisplayFormat: 'day dd month yyyy',
vDayMajorDateDisplayFormat: 'mon yyyy - Week ww',
vWeekMinorDateDisplayFormat: 'dd mon',
vFormatArr: ['Hour', 'Day', 'Week', 'Month', 'Quarter'],
vLang: 'en', vQuarterColWidth: 36, vScrollTo: 'today', vTooltipDelay: 1,
vShowCost: 0, vShowComp: 0, vShowDur: 0, vShowStartDate: 1, vShowEndDate: 1,
vShowPlanStartDate: 0, vShowPlanStartDate: 0, vShowRes: 0, vShowEndWeekDate: 0,
vEvents: {
afterDraw: ()=>{
fix_header_width();
}
},
});
g.AddTaskItemObject({
pID: 1, pName: "Name",
pStart: new Date(),
pEnd: new Date(Date.now() + 15*24*60*60*1000),
pClass: "ggroupblack",
});
g.Draw();
function fix_header_width(){
let dimensions = document.querySelector('table.gtasktable td.gtaskname div').getBoundingClientRect();
document.querySelectorAll('table.gtasktableh td.gtaskname')[1].style.minWidth = dimensions.width + 'px';
}
</script>
</body></html>
Describe the bug
If you manually resize the left table, the column matching is broken, due to reduced width of the first column.
To Reproduce
Steps to reproduce the behavior:
Start Date) will move out.video.mp4
Expected behavior
Keeping the width of the first column.
Lib:
Additional context
Right now I'm using a function call
fix_header_width()that sets the width of the changing column to the same width as the first column with a task, but I'd like to have this behavior as default.