Vertical Scroll

Hi guys,

I have horizontal scroll bar on my gantt chart, however I do not have a vertical one. So when there are tasks running below the page I cannot see or get to them.

From what i have read the vertical and horizontal scroll should be their by default. I could only get the horizontal scroll by setting the following property gantt.config.autosize = “y”; If I tried to set this to gantt.config.autosize = “xy”; I get no scroll bars.

Can someone point me in the right direction - thanks. Main .js code below

[code](function () {
// Set the Gantt Properties
gantt.config.grid_width = 400;
gantt.config.autosize = “y”;
gantt.config.columns = [
{ name: “text”, label: “Task name”, tree: true, width: ‘100’ },
{ name: “holder”, label: “Holder”, align: “center” },
{ name: “start_date”, label: “Start time”, align: “center” },
{ name: “end_date”, label: “End date”, align: “center” },
{ name: “progress”, label: “Progress”, align: “center” },
{ name: “add”, label: “”, width: 44 }
];
gantt.config.show_progress = true;
//gantt.config.fit_tasks = true;
gantt.config.task_height = 25;
gantt.config.order_branch = true;

// set the timescale
function setScaleConfig(value) {
    switch (value) {
        case "1":
            gantt.config.scale_unit = "day";
            gantt.config.step = 1;
            gantt.config.date_scale = "%d %M";
            gantt.config.subscales = [];
            gantt.config.scale_height = 27;
            gantt.templates.date_scale = null;
            break;
        case "2":
            var weekScaleTemplate = function (date) {
                var dateToStr = gantt.date.date_to_str("%d %M");
                var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
                return dateToStr(date) + " - " + dateToStr(endDate);
            };

            gantt.config.scale_unit = "week";
            gantt.config.step = 1;
            gantt.templates.date_scale = weekScaleTemplate;
            gantt.config.subscales = [
				{ unit: "day", step: 1, date: "%D" }
            ];
            gantt.config.scale_height = 50;
            break;
        case "3":
            gantt.config.scale_unit = "month";
            gantt.config.date_scale = "%F, %Y";
            gantt.config.subscales = [
				{ unit: "day", step: 1, date: "%j, %D" }
            ];
            gantt.config.scale_height = 50;
            gantt.templates.date_scale = null;
            break;
        case "4":
            gantt.config.scale_unit = "year";
            gantt.config.step = 1;
            gantt.config.date_scale = "%Y";
            gantt.config.min_column_width = 50;

            gantt.config.scale_height = 90;
            gantt.templates.date_scale = null;

            var monthScaleTemplate = function (date) {
                var dateToStr = gantt.date.date_to_str("%M");
                var endDate = gantt.date.add(date, 2, "month");
                return dateToStr(date) + " - " + dateToStr(endDate);
            };

            gantt.config.subscales = [
				{ unit: "month", step: 3, template: monthScaleTemplate },
				{ unit: "month", step: 1, date: "%M" }
            ];
            break;
    }
}

setScaleConfig('2');
var func = function (e) {
    e = e || window.event;
    var el = e.target || e.srcElement;
    var value = el.value;
    setScaleConfig(value);
    gantt.render();
};

var els = document.getElementsByName("scale");
for (var i = 0; i < els.length; i++) {
    els[i].onclick = func;
}

// configure milestone description
gantt.templates.rightside_text = function (start, end, task) {
    if (task.type == gantt.config.types.milestone) {
        return task.text;
    }
    return "";
};
// add section to type selection: task, project or milestone
gantt.config.lightbox.sections = [
    { name: "description", height: 70, map_to: "text", type: "textarea", focus: true },
    { name: "type", type: "typeselect", map_to: "type" },
    { name: "time", height: 72, type: "duration", map_to: "auto" }
];

gantt.config.xml_date = "%Y-%m-%d %H:%i:%s"; // format of dates in XML
gantt.init("ganttContainer"); // initialize gantt


// Load Data from Gantt Tasks and GanntLinks Tables
gantt.load("/Project/GanttTasks/Data", "json");


// enable dataProcessor
var dp = new dataProcessor("/Project/GanttTasks/Save");


dp.init(gantt);

})();[/code]

Hello,
by default gantt shows both vertical and horizontal scrolls if size of items exceeds size of the components container:
screencast.com/t/0BHSabPTN

autosize=“y” removes the vertical scroll, and expands container element instead. In that case you’ll have vertical scroll of one of the gantt’s parent elements (unless you have ‘overflow:hidden’)
screencast.com/t/fBwt3rsT

Try to remove ‘autosize’ setting. If scroll still does not appears - check if something adds ‘overflow:hidden’ to .gantt_ver_scroll element (where the vertical scrollbar is located).
If this not helps - check the page markup. For example if gantt container is 100% page witdth and you add left margin or something similar, the horizontal scroll is pushed outside the screen

Thank you very much. The culprit was overlow:hidden on my _Layout.cshtml file in the Shared Views folder.

Hi Team,

I’m facing an issue with the vertical scroll on my gantt chart with resource planning.

Initially vertical scroll bar does not appear on the resource planning timeline grid, but as i resize or adjust the screen resolution , vertical scroll bar appears on the screen.

Please help me with this…

Thanks

Hello Binny,
It might happen if Gantt parses tasks but doesn’t have information about some resource data so it doesn’t think that the scroll bar should appear. For example, in the following snippet there is no vertical scroll bar:
snag.gy/YtuyhX.jpg
snippet.dhtmlx.com/6eaea67fa
But if we move gantt.parse() function after resourcesStore.parse() function the vertical scrollbar appears:
snag.gy/NrkWSy.jpg
snippet.dhtmlx.com/c748fb41e