Changed the grid to read the dimensions from the computed style instead of actual elements. This fixes the issues displaying the grid in an initially hidden container.

author: mleibman <michael.leibman@gmail.com> 2010-12-17 22:18:33 -0800
committer: mleibman <michael.leibman@gmail.com> 2010-12-17 22:18:33 -0800
commit: aef2ee2cda172d134f8359d6b6780b6791a5f077 (patch)
tree: 54f5ab19687bab25ebbd10d1a06baeee47450f57
parent: ad76e92c9ba8afcb01563837223bb790a86cf66b (diff)
download: SlickGrid-aef2ee2cda172d134f8359d6b6780b6791a5f077.zip
SlickGrid-aef2ee2cda172d134f8359d6b6780b6791a5f077.tar.gz
SlickGrid-aef2ee2cda172d134f8359d6b6780b6791a5f077.tar.bz2
23 files changed, 208 insertions, 174 deletions
diff --git a/examples/example-checkbox-row-select.html b/examples/example-checkbox-row-select.html
index 9ce8132..b16a04f 100644
--- a/examples/example-checkbox-row-select.html
+++ b/examples/example-checkbox-row-select.html
@@ -30,6 +30,7 @@
 <script src="../lib/jquery-1.4.3.min.js"></script>
 <script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
 <script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../lib/jquery.curstyles.min.js"></script>
 
 <script src="../slick.core.js"></script>
 <script src="../plugins/slick.checkboxselectcolumn.js"></script>
diff --git a/examples/example-header-row.html b/examples/example-header-row.html
index 16d5cb2..2ef383b 100644
--- a/examples/example-header-row.html
+++ b/examples/example-header-row.html
@@ -34,6 +34,7 @@
 		<script src="../lib/jquery-1.4.3.min.js"></script>
 		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
 		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+        <script src="../lib/jquery.curstyles.min.js"></script>
 
         <script src="../slick.core.js"></script>
 		<script src="../slick.dataview.js"></script>
diff --git a/examples/example-spreadsheet.html b/examples/example-spreadsheet.html
index 8f56671..3534322 100644
--- a/examples/example-spreadsheet.html
+++ b/examples/example-spreadsheet.html
@@ -33,6 +33,7 @@
 		<script src="../lib/jquery-1.4.3.min.js"></script>
 		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
 		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+        <script src="../lib/jquery.curstyles.min.js"></script>
 
         <script src="../slick.core.js"></script>
 		<script src="../plugins/slick.autotooltips.js"></script>
diff --git a/examples/example1-simple.html b/examples/example1-simple.html
index 648e56a..1f5dcf1 100644
--- a/examples/example1-simple.html
+++ b/examples/example1-simple.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE HTML>
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
@@ -22,11 +22,12 @@
 		</tr>
 		</table>
 
-		<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
+		<script src="../lib/jquery-1.4.3.min.js"></script>
+		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+        <script src="../lib/jquery.curstyles.min.js"></script>
 
-        <script language="JavaScript" src="../slick.core.js"></script>
-        <script language="JavaScript" src="../slick.grid.js"></script>
+        <script src="../slick.core.js"></script>
+        <script src="../slick.grid.js"></script>
 
 		<script>
 
diff --git a/examples/example10-async-post-render.html b/examples/example10-async-post-render.html
index f434851..fe48bfe 100644
--- a/examples/example10-async-post-render.html
+++ b/examples/example10-async-post-render.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE HTML>
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
@@ -47,16 +47,17 @@
 			</p>
 		</div>
 
-		<script language="JavaScript" src="../lib/firebugx.js"></script>
+		<script src="../lib/firebugx.js"></script>
 
-		<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery.sparkline.min.js"></script>
+		<script src="../lib/jquery-1.4.3.min.js"></script>
+		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
+		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+		<script src="../lib/jquery.sparkline.min.js"></script>
+        <script src="../lib/jquery.curstyles.min.js"></script>
 
-		<script language="JavaScript" src="../slick.core.js"></script>
-		<script language="JavaScript" src="../slick.editors.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
+		<script src="../slick.core.js"></script>
+		<script src="../slick.editors.js"></script>
+		<script src="../slick.grid.js"></script>
 
 		<script>
 		function requiredFieldValidator(value) {
diff --git a/examples/example11-autoheight.html b/examples/example11-autoheight.html
index 0813056..acd7f7e 100644
--- a/examples/example11-autoheight.html
+++ b/examples/example11-autoheight.html
@@ -22,12 +22,13 @@
             </ul>
         </div>
 
-        <script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
-        <script language="JavaScript" src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
-        <script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
+        <script src="../lib/jquery-1.4.3.min.js"></script>
+        <script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
+        <script src="../lib/jquery.event.drag-2.0.min.js"></script>
+        <script src="../lib/jquery.curstyles.min.js"></script>
 
-        <script language="JavaScript" src="../slick.core.js"></script>
-        <script language="JavaScript" src="../slick.grid.js"></script>
+        <script src="../slick.core.js"></script>
+        <script src="../slick.grid.js"></script>
 
         <script>
             var grid,
diff --git a/examples/example12-fillbrowser.html b/examples/example12-fillbrowser.html
index d1d13ab..4572df8 100644
--- a/examples/example12-fillbrowser.html
+++ b/examples/example12-fillbrowser.html
@@ -25,11 +25,12 @@
             </ul>
         </div>
 
-        <script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
-        <script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
+        <script src="../lib/jquery-1.4.3.min.js"></script>
+        <script src="../lib/jquery.event.drag-2.0.min.js"></script>
+        <script src="../lib/jquery.curstyles.min.js"></script>
 
-        <script language="JavaScript" src="../slick.core.js"></script>
-        <script language="JavaScript" src="../slick.grid.js"></script>
+        <script src="../slick.core.js"></script>
+        <script src="../slick.grid.js"></script>
         <script>
             var grid,
                 data = [],
diff --git a/examples/example13-getItem-sorting.html b/examples/example13-getItem-sorting.html
index 0b0cfec..f56deec 100644
--- a/examples/example13-getItem-sorting.html
+++ b/examples/example13-getItem-sorting.html
@@ -24,10 +24,11 @@
             </ul>
         </div>
 
-        <script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
-        <script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
-        <script language="JavaScript" src="../slick.core.js"></script>
-        <script language="JavaScript" src="../slick.grid.js"></script>
+        <script src="../lib/jquery-1.4.3.min.js"></script>
+        <script src="../lib/jquery.event.drag-2.0.min.js"></script>
+        <script src="../lib/jquery.curstyles.min.js"></script>
+        <script src="../slick.core.js"></script>
+        <script src="../slick.grid.js"></script>
 
         <script>
             var grid,
diff --git a/examples/example14-highlighting.html b/examples/example14-highlighting.html
index 1f9c701..5c9da0f 100644
--- a/examples/example14-highlighting.html
+++ b/examples/example14-highlighting.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE HTML>
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
@@ -25,8 +25,6 @@
 	    </style>
 	</head>
 	<body>
-
-
 		<div style="width:520px;float:left;">
 			<div id="myGrid" style="width:100%;height:500px;"></div>
 		</div>
@@ -47,17 +45,18 @@
             <button onclick="findCurrentServer()">Find current server</button>
 		</div>
 
-		<script language="JavaScript" src="../lib/firebugx.js"></script>
+		<script src="../lib/firebugx.js"></script>
 
-		<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
+		<script src="../lib/jquery-1.4.3.min.js"></script>
+		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
+		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+        <script src="../lib/jquery.curstyles.min.js"></script>
 
-        <script language="JavaScript" src="../slick.core.js"></script>
-        <script language="JavaScript" src="../plugins/slick.cellselectionmodel.js"></script>
-        <script language="JavaScript" src="../plugins/slick.rowmovemanager.js"></script>
-		<script language="JavaScript" src="../slick.editors.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
+        <script src="../slick.core.js"></script>
+        <script src="../plugins/slick.cellselectionmodel.js"></script>
+        <script src="../plugins/slick.rowmovemanager.js"></script>
+		<script src="../slick.editors.js"></script>
+		<script src="../slick.grid.js"></script>
 
 		<script>
 		var grid;
diff --git a/examples/example2-formatters.html b/examples/example2-formatters.html
index 78cb559..120261f 100644
--- a/examples/example2-formatters.html
+++ b/examples/example2-formatters.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE HTML>
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
@@ -33,15 +33,16 @@
 		</tr>
 		</table>
 
-		<script language="JavaScript" src="../lib/firebugx.js"></script>
+		<script src="../lib/firebugx.js"></script>
 
-		<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
+		<script src="../lib/jquery-1.4.3.min.js"></script>
+		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
+		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+        <script src="../lib/jquery.curstyles.min.js"></script>
 
-		<script language="JavaScript" src="../slick.core.js"></script>
-		<script language="JavaScript" src="../slick.editors.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
+		<script src="../slick.core.js"></script>
+		<script src="../slick.editors.js"></script>
+		<script src="../slick.grid.js"></script>
 
         <script>
 		var grid;
diff --git a/examples/example3-editing.html b/examples/example3-editing.html
index ae3e7b3..14787b4 100644
--- a/examples/example3-editing.html
+++ b/examples/example3-editing.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE HTML>
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
@@ -35,17 +35,18 @@
             <button onclick="grid.setOptions({autoEdit:false})">Auto-edit OFF</button>
 		</div>
 
-		<script language="JavaScript" src="../lib/firebugx.js"></script>
+		<script src="../lib/firebugx.js"></script>
 
-		<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
+		<script src="../lib/jquery-1.4.3.min.js"></script>
+		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
+		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+        <script src="../lib/jquery.curstyles.min.js"></script>
 
-        <script language="JavaScript" src="../slick.core.js"></script>
-		<script language="JavaScript" src="../plugins/slick.cellrangeselector.js"></script>
-		<script language="JavaScript" src="../plugins/slick.cellselectionmodel.js"></script>
-		<script language="JavaScript" src="../slick.editors.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
+        <script src="../slick.core.js"></script>
+		<script src="../plugins/slick.cellrangeselector.js"></script>
+		<script src="../plugins/slick.cellselectionmodel.js"></script>
+		<script src="../slick.editors.js"></script>
+		<script src="../slick.grid.js"></script>
 
 		<script>
 		function requiredFieldValidator(value) {
diff --git a/examples/example3a-compound-editors.html b/examples/example3a-compound-editors.html
index d6b8d8f..65ec078 100644
--- a/examples/example3a-compound-editors.html
+++ b/examples/example3a-compound-editors.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE HTML>
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
@@ -28,15 +28,16 @@
             </ul>
 		</div>
 
-		<script language="JavaScript" src="../lib/firebugx.js"></script>
+		<script src="../lib/firebugx.js"></script>
 
-		<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
+		<script src="../lib/jquery-1.4.3.min.js"></script>
+		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
+		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+        <script src="../lib/jquery.curstyles.min.js"></script>
 
-		<script language="JavaScript" src="../slick.core.js"></script>
-		<script language="JavaScript" src="../slick.editors.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
+		<script src="../slick.core.js"></script>
+		<script src="../slick.editors.js"></script>
+		<script src="../slick.grid.js"></script>
 
 		<script>
 		var grid;
diff --git a/examples/example3b-editing-with-undo.html b/examples/example3b-editing-with-undo.html
index 76adb66..6625a92 100644
--- a/examples/example3b-editing-with-undo.html
+++ b/examples/example3b-editing-with-undo.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE HTML>
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
@@ -17,8 +17,6 @@
 	</style>
 	</head>
 	<body>
-
-
 		<div style="width:600px;float:left;">
 			<div id="myGrid" style="width:100%;height:500px;"></div>
 		</div>
@@ -33,15 +31,16 @@
             <button onclick="undo()"><img src="../images/arrow_undo.png" align="absmiddle"> Undo</button> 
 		</div>
 
-		<script language="JavaScript" src="../lib/firebugx.js"></script>
+		<script src="../lib/firebugx.js"></script>
 
-		<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
+		<script src="../lib/jquery-1.4.3.min.js"></script>
+		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
+		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+        <script src="../lib/jquery.curstyles.min.js"></script>
 
-		<script language="JavaScript" src="../slick.core.js"></script>
-		<script language="JavaScript" src="../slick.editors.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
+		<script src="../slick.core.js"></script>
+		<script src="../slick.editors.js"></script>
+		<script src="../slick.grid.js"></script>
 
 		<script>
 		function requiredFieldValidator(value) {
diff --git a/examples/example4-model.html b/examples/example4-model.html
index 8f9f316..4b0ac61 100644
--- a/examples/example4-model.html
+++ b/examples/example4-model.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE HTML>
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
@@ -82,19 +82,20 @@
             and % at least &nbsp; <div style="width:100px;display:inline-block;" id="pcSlider2"></div>
         </div>
 
-		<script language="JavaScript" src="../lib/firebugx.js"></script>
+		<script src="../lib/firebugx.js"></script>
 
-		<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
+		<script src="../lib/jquery-1.4.3.min.js"></script>
+		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
+		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+        <script src="../lib/jquery.curstyles.min.js"></script>
 
-		<script language="JavaScript" src="../slick.core.js"></script>
-		<script language="JavaScript" src="../slick.editors.js"></script>
-		<script language="JavaScript" src="../plugins/slick.rowselectionmodel.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
-		<script language="JavaScript" src="../slick.dataview.js"></script>
-		<script language="JavaScript" src="../controls/slick.pager.js"></script>
-		<script language="JavaScript" src="../controls/slick.columnpicker.js"></script>
+		<script src="../slick.core.js"></script>
+		<script src="../slick.editors.js"></script>
+		<script src="../plugins/slick.rowselectionmodel.js"></script>
+		<script src="../slick.grid.js"></script>
+		<script src="../slick.dataview.js"></script>
+		<script src="../controls/slick.pager.js"></script>
+		<script src="../controls/slick.columnpicker.js"></script>
 
 		<script>
 		var dataView;
diff --git a/examples/example5-collapsing.html b/examples/example5-collapsing.html
index 008293e..a443980 100644
--- a/examples/example5-collapsing.html
+++ b/examples/example5-collapsing.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE HTML>
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
@@ -56,16 +56,17 @@
 		</tr>
 		</table>
 
-		<script language="JavaScript" src="../lib/firebugx.js"></script>
+		<script src="../lib/firebugx.js"></script>
 
-		<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
+		<script src="../lib/jquery-1.4.3.min.js"></script>
+		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
+		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+        <script src="../lib/jquery.curstyles.min.js"></script>
 
-		<script language="JavaScript" src="../slick.core.js"></script>
-		<script language="JavaScript" src="../slick.editors.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
-		<script language="JavaScript" src="../slick.dataview.js"></script>
+		<script src="../slick.core.js"></script>
+		<script src="../slick.editors.js"></script>
+		<script src="../slick.grid.js"></script>
+		<script src="../slick.dataview.js"></script>
 
 		<script>
 		function requiredFieldValidator(value) {
diff --git a/examples/example6-ajax-loading.html b/examples/example6-ajax-loading.html
index 621e049..8b6f378 100644
--- a/examples/example6-ajax-loading.html
+++ b/examples/example6-ajax-loading.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE HTML>
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
@@ -59,16 +59,17 @@
                 </ul>
 		</div>
 
-		<script language="JavaScript" src="../lib/firebugx.js"></script>
+		<script src="../lib/firebugx.js"></script>
 
-		<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery.jsonp-1.1.0.min.js"></script>
+		<script src="../lib/jquery-1.4.3.min.js"></script>
+		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
+		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+		<script src="../lib/jquery.jsonp-1.1.0.min.js"></script>
+        <script src="../lib/jquery.curstyles.min.js"></script>
 
-		<script language="JavaScript" src="../slick.core.js"></script>
-		<script language="JavaScript" src="../slick.remotemodel.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
+		<script src="../slick.core.js"></script>
+		<script src="../slick.remotemodel.js"></script>
+		<script src="../slick.grid.js"></script>
 
 		<script>
 		var grid;
diff --git a/examples/example7-events.html b/examples/example7-events.html
index 99ffa98..b23db57 100644
--- a/examples/example7-events.html
+++ b/examples/example7-events.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE HTML>
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
@@ -62,15 +62,16 @@
 			<li data="High">High</li>
 		</ul>
 
-		<script language="JavaScript" src="../lib/firebugx.js"></script>
+		<script src="../lib/firebugx.js"></script>
 
-		<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
+		<script src="../lib/jquery-1.4.3.min.js"></script>
+		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
+		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+        <script src="../lib/jquery.curstyles.min.js"></script>
 
-		<script language="JavaScript" src="../slick.core.js"></script>
-		<script language="JavaScript" src="../slick.editors.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
+		<script src="../slick.core.js"></script>
+		<script src="../slick.editors.js"></script>
+		<script src="../slick.grid.js"></script>
 
 		<script>
 		var grid;
diff --git a/examples/example8-alternative-display.html b/examples/example8-alternative-display.html
index 020068c..ef8b289 100644
--- a/examples/example8-alternative-display.html
+++ b/examples/example8-alternative-display.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE HTML>
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
@@ -87,13 +87,14 @@
 			</div>
 		</script>
 
-		<script language="JavaScript" src="../lib/firebugx.js"></script>
+		<script src="../lib/firebugx.js"></script>
 
-		<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
+		<script src="../lib/jquery-1.4.3.min.js"></script>
+		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+        <script src="../lib/jquery.curstyles.min.js"></script>
 
-		<script language="JavaScript" src="../slick.core.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
+		<script src="../slick.core.js"></script>
+		<script src="../slick.grid.js"></script>
 
 		<script>
 		// Simple JavaScript Templating
diff --git a/examples/example9-row-reordering.html b/examples/example9-row-reordering.html
index 016d4ea..1d70c95 100644
--- a/examples/example9-row-reordering.html
+++ b/examples/example9-row-reordering.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE HTML>
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
@@ -75,21 +75,22 @@
 			</div>
 		</div>
 
-		<script language="JavaScript" src="../lib/firebugx.js"></script>
+		<script src="../lib/firebugx.js"></script>
 
-		<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery.event.drop-2.0.min.js"></script>
+		<script src="../lib/jquery-1.4.3.min.js"></script>
+		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
+		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+		<script src="../lib/jquery.event.drop-2.0.min.js"></script>
+        <script src="../lib/jquery.curstyles.min.js"></script>
 
-        <script language="JavaScript" src="../slick.core.js"></script>
-        <script language="JavaScript" src="../plugins/slick.cellrangeselector.js"></script>
-        <script language="JavaScript" src="../plugins/slick.cellselectionmodel.js"></script>
-        <script language="JavaScript" src="../plugins/slick.rowselectionmodel.js"></script>
-        <script language="JavaScript" src="../plugins/slick.rowmovemanager.js"></script>
+        <script src="../slick.core.js"></script>
+        <script src="../plugins/slick.cellrangeselector.js"></script>
+        <script src="../plugins/slick.cellselectionmodel.js"></script>
+        <script src="../plugins/slick.rowselectionmodel.js"></script>
+        <script src="../plugins/slick.rowmovemanager.js"></script>
 
-		<script language="JavaScript" src="../slick.editors.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
+		<script src="../slick.editors.js"></script>
+		<script src="../slick.grid.js"></script>
 
 		<script>
 		var grid;
diff --git a/lib/jquery.curstyles.min.js b/lib/jquery.curstyles.min.js
new file mode 100644
index 0000000..a47d240
--- /dev/null
+++ b/lib/jquery.curstyles.min.js
@@ -0,0 +1,2 @@
+(function(f){var i=document.defaultView&&document.defaultView.getComputedStyle,n=/([A-Z])/g,l=/-([a-z])/ig,m=function(a,g){return g.toUpperCase()},o=function(a){if(i)return i(a,null);else if(a.currentStyle)return a.currentStyle},p=/float/i,q=/^-?\d+(?:px)?$/i,r=/^-?\d/;f.curStyles=function(a,g){if(!a)return null;for(var j=o(a),c,d,h=a.style,e={},k=0,b;k<g.length;k++){b=g[k];c=b.replace(l,m);if(p.test(b)){b=jQuery.support.cssFloat?"float":"styleFloat";c="cssFloat"}if(i){b=b.replace(n,"-$1").toLowerCase();
+d=j.getPropertyValue(b);if(b==="opacity"&&d==="")d="1";e[c]=d}else{d=b.replace(l,m);e[c]=j[b]||j[d];if(!q.test(e[c])&&r.test(e[c])){b=h.left;var s=a.runtimeStyle.left;a.runtimeStyle.left=a.currentStyle.left;h.left=d==="fontSize"?"1em":e[c]||0;e[c]=h.pixelLeft+"px";h.left=b;a.runtimeStyle.left=s}}}return e};f.fn.curStyles=function(){return f.curStyles(this[0],f.makeArray(arguments))}})(jQuery);
diff --git a/slick.grid.js b/slick.grid.js
index a05a999..d39673d 100644
--- a/slick.grid.js
+++ b/slick.grid.js
@@ -57,6 +57,7 @@ if (typeof Slick === "undefined") {
 
         // settings
         var defaults = {
+            headerHeight: 25,
             rowHeight: 25,
             defaultColumnWidth: 80,
             enableAddRow: false,
@@ -229,8 +230,6 @@ if (typeof Slick === "undefined") {
             // calculate the diff so we can set consistent sizes
             measureCellPaddingAndBorder();
 
-            resizeViewport();
-
             // for usability reasons, all text selection in SlickGrid is disabled
             // with the exception of input and textarea elements (selection must
             // be enabled there so that editors work as expected); note that
@@ -243,6 +242,8 @@ if (typeof Slick === "undefined") {
             setupColumnSort();
             createCssRules();
 
+            viewportW = parseInt($.curCSS($container[0], "width", true));
+
             resizeAndRender();
 
             bindAncestorScrollEvents();
@@ -655,16 +656,32 @@ if (typeof Slick === "undefined") {
                 });
         }
 
+        function getVBoxDelta($el) {
+            var p = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"];
+            var s = $el.curStyles.apply($el, p);
+            var delta = 0;
+            $.each(p, function(n,val) { delta += parseInt(s[val]) || 0; });
+            return delta;
+        }
+
         function measureCellPaddingAndBorder() {
-            var tmp = $("<div class='ui-state-default slick-header-column' style='visibility:hidden'>-</div>").appendTo($headers);
-            headerColumnWidthDiff = tmp.outerWidth() - tmp.width();
-            headerColumnHeightDiff = tmp.outerHeight() - tmp.height();
-            tmp.remove();
+            var el, s;
+            var h = ["borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight"];
+            var v = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"];
+
+            el = $("<div class='ui-state-default slick-header-column' style='visibility:hidden'>-</div>").appendTo($headers);
+            headerColumnWidthDiff = headerColumnHeightDiff = 0;
+            s = el.curStyles.apply(el, h.concat(v));
+            $.each(h, function(n,val) { headerColumnWidthDiff += parseInt(s[val]) || 0; });
+            $.each(v, function(n,val) { headerColumnHeightDiff += parseInt(s[val]) || 0; });
+            el.remove();
 
             var r = $("<div class='slick-row' />").appendTo($canvas);
-            tmp = $("<div class='slick-cell' id='' style='visibility:hidden'>-</div>").appendTo(r);
-            cellWidthDiff = tmp.outerWidth() - tmp.width();
-            cellHeightDiff = tmp.outerHeight() - tmp.height();
+            el = $("<div class='slick-cell' id='' style='visibility:hidden'>-</div>").appendTo(r);
+            cellWidthDiff = cellHeightDiff = 0;
+            s = el.curStyles.apply(el, h.concat(v));
+            $.each(h, function(n,val) { cellWidthDiff += parseInt(s[val]) || 0; });
+            $.each(v, function(n,val) { cellHeightDiff += parseInt(s[val]) || 0; });
             r.remove();
 
             absoluteColumnMinWidth = Math.max(headerColumnWidthDiff,cellWidthDiff);
@@ -770,7 +787,6 @@ if (typeof Slick === "undefined") {
             var i, c,
                 widths = [],
                 shrinkLeeway = 0,
-                viewportW = $viewport.innerWidth(), // may not be initialized yet
                 availWidth = (options.autoHeight ? viewportW : viewportW - scrollbarDimensions.width), // with AutoHeight, we do not need to accomodate the vertical scroll bar
                 total = 0,
                 existingTotal = 0;
@@ -1121,32 +1137,31 @@ if (typeof Slick === "undefined") {
             invalidatePostProcessingResults(row);
         }
 
-        function resizeViewport() {
-            $viewport.height(
-                $container.innerHeight() -
-                $headerScroller.outerHeight() -
-                (options.showTopPanel ? $topPanelScroller.outerHeight() : 0) -
-                (options.showHeaderRow ? $headerRow.outerHeight() : 0));
+        function getViewportHeight() {
+            return parseInt($.curCSS($container[0], "height", true)) -
+                options.headerHeight -
+                getVBoxDelta($headers) -
+                (options.showTopPanel ? options.topPanelHeight + getVBoxDelta($topPanelScroller) : 0) -
+                (options.showHeaderRow ? options.headerRowHeight + getVBoxDelta($headerRowScroller) : 0);
         }
 
         function resizeCanvas() {
-            var newViewportH = options.rowHeight * (getDataLength() + (options.enableAddRow ? 1 : 0) + (options.leaveSpaceForNewRows? numVisibleRows - 1 : 0));
-            if (options.autoHeight) { // use computed height to set both canvas _and_ divMainScroller, effectively hiding scroll bars.
-                $viewport.height(newViewportH);
+            if (options.autoHeight) {
+                viewportH = options.rowHeight * (getDataLength() + (options.enableAddRow ? 1 : 0) + (options.leaveSpaceForNewRows? numVisibleRows - 1 : 0));
             }
             else {
-                resizeViewport();
+                viewportH = getViewportHeight();
             }
 
-            viewportW = $viewport.innerWidth();
-            viewportH = $viewport.innerHeight();
             numVisibleRows = Math.ceil(viewportH / options.rowHeight);
+            viewportW = parseInt($.curCSS($container[0], "width", true));
+            $viewport.height(viewportH);
 
-            var totalWidth = 0;
-            $headers.find(".slick-header-column").each(function() {
-                totalWidth += $(this).outerWidth();
-            });
-            setCanvasWidth(totalWidth);
+            var w = 0, i = columns.length;
+            while (i--) {
+                w += columns[i].currentWidth || columns[i].width;
+            }
+            setCanvasWidth(w);
 
             updateRowCount();
             render();
@@ -1694,7 +1709,7 @@ if (typeof Slick === "undefined") {
                 }
         }
 
-        function setActiveCellInternal(newCell,editMode) {
+        function setActiveCellInternal(newCell, editMode) {
             if (activeCellNode !== null) {
                 makeActiveCellNormal();
                 $(activeCellNode).removeClass("active");
diff --git a/tests/model benchmarks.html b/tests/model benchmarks.html
index 42632f5..86eed7a 100644
--- a/tests/model benchmarks.html
+++ b/tests/model benchmarks.html
@@ -1,14 +1,14 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE HTML>
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 		<title>SlickGrid Model Benchmark</title>
 	</head>
 	<body>
-		<script language="JavaScript" src="../lib/firebugx.js"></script>
-		<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
-		<script language="JavaScript" src="../slick.core.js"></script>
-		<script language="JavaScript" src="../slick.dataview.js"></script>
+		<script src="../lib/firebugx.js"></script>
+		<script src="../lib/jquery-1.4.3.min.js"></script>
+		<script src="../slick.core.js"></script>
+		<script src="../slick.dataview.js"></script>
 
 		<script>
 
diff --git a/tests/scrolling benchmarks.html b/tests/scrolling benchmarks.html
index ea977e7..95c1ce2 100644
--- a/tests/scrolling benchmarks.html
+++ b/tests/scrolling benchmarks.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE HTML>
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
@@ -17,14 +17,15 @@
 		</style>
 	</head>
 	<body>
-		<script language="JavaScript" src="../lib/firebugx.js"></script>
-		<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
-		<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
+		<script src="../lib/firebugx.js"></script>
+		<script src="../lib/jquery-1.4.3.min.js"></script>
+		<script src="../lib/jquery.curstyles.min.js"></script>
+		<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
+		<script src="../lib/jquery.event.drag-2.0.min.js"></script>
 
-		<script language="JavaScript" src="../slick.core.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
-		<script language="JavaScript" src="../slick.editors.js"></script>
+		<script src="../slick.core.js"></script>
+		<script src="../slick.grid.js"></script>
+		<script src="../slick.editors.js"></script>
 
 		<button onclick="grid.debug()">Debug info</button>
 		<button onclick="startBench(100)">Run (+= 100px)</button>
@@ -62,7 +63,8 @@
 			editable: false,
 			enableAddRow: false,
 			enableCellNavigation: true,
-			enableAsyncPostRender: true
+			enableAsyncPostRender: true,
+            forceFitColumns: true
 		};
author	mleibman <michael.leibman@gmail.com>	2010-12-17 22:18:33 -0800
committer	mleibman <michael.leibman@gmail.com>	2010-12-17 22:18:33 -0800
commit	aef2ee2cda172d134f8359d6b6780b6791a5f077 (patch)
tree	54f5ab19687bab25ebbd10d1a06baeee47450f57
parent	ad76e92c9ba8afcb01563837223bb790a86cf66b (diff)
download	SlickGrid-aef2ee2cda172d134f8359d6b6780b6791a5f077.zip SlickGrid-aef2ee2cda172d134f8359d6b6780b6791a5f077.tar.gz SlickGrid-aef2ee2cda172d134f8359d6b6780b6791a5f077.tar.bz2