Gantt Chart won't inherit 100% width from parent div

[dekowski411]

dojox.ganttchart is defaulted @ 600 width by 400 height; cannot override the inherited default to a height and width of 100%, can only declare height/width as integer. If set to 100% the Gantt Chart does not render, will only render if width and height is declared or commented out to initiate the default. See example below:

<script> ... var ganttChart = new dojox.gantt.GanttChart?({

readOnly : false, height: 100%, width: 100%, withResource : false

}, "gantt");

ganttChart.addProject(projectDev);

Initialize and Render ganttChart.init();

});

... </script>

<div style="width: 75%; padding: 0px;" data-dojo-type="dijit.layout.BorderContainer?" data-dojo-props="region: 'right',liveSplitters:false">

<div id="mapDivTarget">

<div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'" style="padding:0px"></div> <applet codebase="js/renderer" code="sec.web.renderer.SECWebRenderer" archive="SECRenderer.jar,JavaLineArray?-0.0.5-SNAPSHOT.jar,JavaRenderer?-0.0.5-SNAPSHOT.jar,JavaRendererPluginInterface?-0.0.5-SNAPSHOT.jar,JavaRendererServer?-0.0.5-SNAPSHOT.jar,JavaRendererUtils?-0.0.5-SNAPSHOT.jar" height="1" width="1" name="SECRenderer" id="SECRenderer"></applet>

</div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'trailing'" style="width: 250px">

<div data-dojo-type="dijit/layout/AccordionContainer" style="margin: -8px;">

<div data-dojo-type="dijit/layout/AccordionPane" title="Unit Palette">

<div id="unitPalette"></div>

</div> <div data-dojo-type="dijit/layout/AccordionPane" title="Task Palette">

<div id="taskPalette"></div>

</div> <div data-dojo-type="dijit/layout/AccordionPane" title="Area Palette">

<div id="AreaPalette?"></div>

</div> <div data-dojo-type="dijit/layout/AccordionPane" title="Draw Palette">

<div id="drawPalette"></div>

</div>

</div>

</div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter: true" style="height: 16%; margin-left: -8px">

<!--Gantt Chart-->

<div id="gantt"></div>

<!--<div style="background-color: #333333; width: 100%; height: 100%"></div>-->

</div>

</div>

[shauki]

I am developing an application with bottom tabs like Excel sheets whith each sheet containing a separate Gantt chart. I have implemented the complete filling of the sheet with the chart by mixing in with the original GanttChart? and adding the following modifications that can be inserted into the bottom of test_Gantt.html:

var ShaukiGanttChart? = dojo.declare("dojox.gantt.ShaukiGanttChart?", GanttChart?, {

postBindEvents: function() {

var pos = domGeometry.position(this.tableControl, true); /*has("dom-addeventlistener") && */this._events.push(

on(this.tableControl, "mousemove", lang.hitch(this, function(event) {

var elem = event.srcElement if (elem === this.panelNames.firstChild

event.target;

elem === this.contentData.firstChild) {

var rowHeight = this.heightTaskItem + this.heightTaskItemExtra; var hlTop = parseInt(event.layerY / rowHeight - 1) * rowHeight + this.panelTimeHeight - this.contentData.scrollTop; if (hlTop !== this.oldHLTop && hlTop < (pos.h - 50)) {

if (this.highLightDiv) {

domStyle.set(this.highLightDiv, "top", (pos.y + hlTop) + "px");

} else {

this.highLightDiv = domConstruct.create("div", {

className: "ganttRowHighlight"

}, this.tableControl/*win.body()*/); domStyle.set(this.highLightDiv, {

top: (/*pos.y + */hlTop) + "px", left: "0px", right: "20px", height: rowHeight + "px"

});

}

} this.oldHLTop = hlTop;

}

}))

);

}, shaukiFitOnPage: function() {

this.contentHeight = dojo.global.innerHeight - this.panelTimeHeight; domStyle.set(this.content, {

width: "100%", height: this.contentHeight + "px"

}); var pos = domGeometry.position(this.content, true); this.contentWidth = pos.w;

domStyle.set(this.contentData, "height", (this.contentHeight - this.panelTimeHeight) + "px"); domStyle.set(this.panelNames, "height", (this.contentHeight - this.panelTimeHeight - this.scrollBarWidth) + "px"); domStyle.set(this.contentData, "width", (this.contentWidth - this.maxWidthPanelNames) + "px"); domStyle.set(this.panelTime, "width", (this.contentWidth - this.maxWidthPanelNames - this.scrollBarWidth) + "px"); this.refresh(1, 1, 1); this.postBindEvents();

}

});

var ganttChart = new ShaukiGanttChart?({

withTaskId: true, withResource: false

}, "gantt" + ui); ganttChart.addProject(projectDev);

dojo.connect(window, "onresize", dojo.hitch(ganttChart, function() {

this.shaukiFitOnPage();

}));

ganttChart.init(); ganttChart.shaukiFitOnPage();

I hope above can be helpful improving the original GanttChart? prototype soon.

[dylan]

Given that no one has shown interest in creating a patch in the past 2+ years, I'm closing this as patchwelcome.