簡單的jQuery.Gantt寬度和高度調整

我正在使用從這個網站http://mbielanczuk.com/2011/06/jquery-gantt-chart/ jQuery插件。簡單的jQuery.Gantt寬度和高度調整

我能夠實現它，除了我有問題的寬度和高度。例如：http://www.txtease.com/android/push/login/schedule/mbielan/index.htm

從鏈接中，您可以看到圖表未填滿屏幕。您是否熟悉使用jQuery.Gantt並知道要調整寬度和高度的元素？

我已經設置了「itemsperpage」參數17
從我的調查，它看起來像圖的寬度是基於高度。該號碼分爲分頁。
我把一個寬度和高度的樣式圍繞在CSS圖表。只有高度調整到800px。寬度保持不變

甘特 < /腳本 - >

<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 
    <script type="text/javascript"> 

jQuery(function() { 
var dataPath = location.href.substring(0, location.href.lastIndexOf('/')+1); 
$(".gantt2").gantt({source: dataPath + "js/dataHours.js", navigate: 'scroll', scale: 'hours', maxScale: 'hours', minScale: 'hours', hollydays: ["\/Date(1293836400000)\/","\/Date(1294268400000)\/","\/Date(1303596000000)\/","\/Date(1306274400000)\/","\/Date(1304200800000)\/","\/Date(1304373600000)\/","\/Date(1307829600000)\/","\/Date(1308780000000)\/","\/Date(1313359200000)\/","\/Date(1320105600000)\/","\/Date(1320966000000)\/","\/Date(1324767600000)\/","\/Date(1324854000000)\/","\/Date(1325372400000)\/","\/Date(1325804400000)\/","\/Date(1333836000000)\/","\/Date(1336514400000)\/","\/Date(1335823200000)\/","\/Date(1335996000000)\/","\/Date(1338069600000)\/","\/Date(1339020000000)\/","\/Date(1344981600000)\/","\/Date(1351724400000)\/","\/Date(1352588400000)\/","\/Date(1356390000000)\/","\/Date(1356476400000)\/"]}); 
//$(".gantt").gantt({source: dataPath + "js/dataDays.js", navigate: 'scroll', scale: 'days', maxScale: 'weeks', minScale: 'days', hollydays: ["\/Date(1293836400000)\/","\/Date(1294268400000)\/","\/Date(1303596000000)\/","\/Date(1306274400000)\/","\/Date(1304200800000)\/","\/Date(1304373600000)\/","\/Date(1307829600000)\/","\/Date(1308780000000)\/","\/Date(1313359200000)\/","\/Date(1320105600000)\/","\/Date(1320966000000)\/","\/Date(1324767600000)\/","\/Date(1324854000000)\/","\/Date(1325372400000)\/","\/Date(1325804400000)\/","\/Date(1333836000000)\/","\/Date(1336514400000)\/","\/Date(1335823200000)\/","\/Date(1335996000000)\/","\/Date(1338069600000)\/","\/Date(1339020000000)\/","\/Date(1344981600000)\/","\/Date(1351724400000)\/","\/Date(1352588400000)\/","\/Date(1356390000000)\/","\/Date(1356476400000)\/"]}); 
//$(".gantt").gantt({ 
// source: [{"name":"application","desc":"LÃ¼beck","values":[{"from":"/Date(1293874598708)/","to":"/Date(1354268198708)/","desc":"ID: 10<br/>name: CRM<br/>date: 01.01.2011 to 30.11.2012<br/>description: CRM 4.0", "label":"CRM","customClass":"ganttGreen"}]}], 
// navigate: 'scroll', scale: 'days', hollydays: ["\/Date(1293836400000)\/","\/Date(1294268400000)\/","\/Date(1303596000000)\/","\/Date(1306274400000)\/","\/Date(1304200800000)\/","\/Date(1304373600000)\/","\/Date(1307829600000)\/","\/Date(1308780000000)\/","\/Date(1313359200000)\/","\/Date(1320105600000)\/","\/Date(1320966000000)\/","\/Date(1324767600000)\/","\/Date(1324854000000)\/","\/Date(1325372400000)\/","\/Date(1325804400000)\/","\/Date(1333836000000)\/","\/Date(1336514400000)\/","\/Date(1335823200000)\/","\/Date(1335996000000)\/","\/Date(1338069600000)\/","\/Date(1339020000000)\/","\/Date(1344981600000)\/","\/Date(1351724400000)\/","\/Date(1352588400000)\/","\/Date(1356390000000)\/","\/Date(1356476400000)\/"]}); 

}); 

    </script> 
</head> 
<body> 

<div class="gantt2" style="width: 800px,height: 800px"></div> 
</body>

任何幫助表示讚賞！

來源

2012-10-19 Leoa

插件附帶有一個默認的style.css文件。我改變了這一點，它的工作原理

.gantt { 
    width: 800px; 
    height: 800px; 
    margin: 20px auto; 
    border: 15px solid #ddd; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
}

來源

2012-10-19 16:21:43 Leoa

簡單的jQuery.Gantt寬度和高度調整

回答

相關問題