* change kanban page width to full size.

module/execution/css/kanbandemo.css

@@ -1,6 +1,9 @@
-#main > .container {max-width: none!important; padding: 0 15px}
+#header {position: fixed; top: 0; left: 0; right: 0; z-index: 10;}
+#mainMenu {position: fixed; padding: 10px 15px; top: 60px; left: 0; right: 0; background-color: #efefef; z-index: 0;}
+#main {padding-bottom: 0; padding-top: 50px;}
+#main > .container {max-width: none!important; padding: 0}
+#kanbanContainer {border-radius: 0; margin: 48px 0 0 0;}
 
-.kanban {overflow-x: auto}
 .kanban + .kanban {margin-top: 15px}
 .kanban-item > .title { display: block;white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
 .kanban-item > .infos {position: relative; margin-top: 5px}

module/execution/js/kanbandemo.js

@@ -524,6 +524,19 @@ function createKanban(kanbanID, data, options)
     $kanban.kanban($.extend({data: data}, options));
 }
 
+$.extend($.fn.kanban.Constructor.DEFAULTS,
+{
+    onRender: function()
+    {
+        var maxWidth = 0;
+        $('#kanbans .kanban-board').each(function()
+        {
+            maxWidth = Math.max(maxWidth, $(this).outerWidth());
+        });
+        $('#kanbanContainer').css('min-width', maxWidth + 40);
+    }
+});
+
 /* Example code: */
 $(function()
 {
@@ -532,7 +545,7 @@ $(function()
     {
         maxColHeight:  'auto',
         minColWidth:    240,
-        dropable:       true,
+        droppable:      true,
         showCount:      true,
         showZeroCount:  true,
         countRender:    renderColumnCount

module/execution/view/kanbandemo.html.php

@@ -48,13 +48,11 @@
   </div>
 </div>
 
-<div class='panel'>
+<div class='panel' id='kanbanContainer'>
   <div class='panel-heading'>
     <strong>Section</strong>
   </div>
-  <div class='panel-body'>
-    <div id='kanbans'></div>
-  </div>
+  <div id='kanbans' class='panel-body'></div>
 </div>
 <?php js::set('executionID', $executionID);?>
 <?php js::set('statusMap', $statusMap);?>