Fixed column alignments, added refresh method that can be called when scrolling is or isn't present.

rdworth · rdworth · commit 794724a5305b · 2011-02-03T08:25:01.000-05:00
diff --git a/grid-markup/grid.css b/grid-markup/grid.css
@@ -8,6 +8,7 @@ Functional
 .ui-grid .ui-grid-head-table, .ui-grid .ui-grid-body-table {
 	border-collapse: collapse;
 	table-layout: fixed;
+	width: 100%;
 }
 .ui-grid .ui-grid-body-table thead th {
 	height: 0!important;
diff --git a/grid-markup/grid.html b/grid-markup/grid.html
@@ -25,6 +25,7 @@
 </head>
 <body>
 
+<div style="width: 450px;">
 <table id="dataTable1">
 	<thead>
 		<tr>
@@ -52,10 +53,11 @@
 		</tr>
 	</tbody>
 </table>
+</div>
 
 <p></p>
 
-<table id="dataTable2" style="width:100%;">
+<table id="dataTable2">
 <caption>People are strange when you're a stranger</caption>
 <colgroup><col><col><col><col><col><col><col><col><col><col><col><col><col><col><col></colgroup>
 <thead>
diff --git a/grid-markup/grid.js b/grid-markup/grid.js
@@ -37,15 +37,18 @@ $.widget( "ui.grid", {
 		uiGridBodyTable.find("caption")
 			.prependTo( uiGridHeadTable );
 
+		// Create COLGROUP and COLs if missing
 		if ( !uiGridBodyTable.find("colgroup").length ) {
 			// TODO: Consider adding support for existing COL elements not inside COLGROUP
+			// TODO: ... in the meantime, remove any that might exist
 			uiGridBodyTable.find("col").remove();
 			var colgroup = $("<colgroup></colgroup>").insertBefore( uiGridBodyTable.find("thead") );
 			uiGridBodyTable.find("tr:eq(0)").children().each(function(i) {
 				colgroup.append("<col>");
 			});
 		}
 
+		// Auto-size columns based on relative widths of pre-grid table column widths
 		uiGridBody.find("colgroup").children().each(function(i) {
 			$(this).css("width", ( colWidths[i] / totalWidth * 100 ) + '%' );
 		});
@@ -55,13 +58,6 @@ $.widget( "ui.grid", {
 			.clone()
 			.appendTo( uiGridHeadTable );
 
-		// TODO: handle case of no COLs existing
-		// Set head col widths equal to body col widths
-		var headCols = uiGridHeadTable.find("col");
-		uiGridBodyTable.find("col").each(function(i, a) {
-			headCols.eq(i).width( $(this).width() );
-		});
-
 		// Move table THEAD to grid head for fixed column headers
 		uiGridBodyTable.find("thead")
 			.appendTo( uiGridHeadTable );
@@ -78,6 +74,17 @@ $.widget( "ui.grid", {
 		// Give body cells a clickable state
 		uiGridBodyTable.find("td").addClass("ui-state-default");
 
+		this.refresh();
+
+	},
+	refresh: function() {
+		// Adjust head in case of visible scrollbar on body to keep columns aligned
+		var vertScrollbar = ( this.uiGridBody[0].scrollHeight !== this.uiGridBody[0].clientHeight );
+		if ( vertScrollbar ) {
+			this.uiGridHead.css("padding-right", ( this.uiGridBody.width() - this.uiGridBodyTable.width() ) + "px" );
+		} else {
+			this.uiGridHead.css("padding-right", 0);
+		}
 	}
 });
 

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@ Functional`
`8`	`8`	`.ui-grid .ui-grid-head-table, .ui-grid .ui-grid-body-table {`
`9`	`9`	`border-collapse: collapse;`
`10`	`10`	`table-layout: fixed;`
	`11`	`+ width: 100%;`
`11`	`12`	`}`
`12`	`13`	`.ui-grid .ui-grid-body-table thead th {`
`13`	`14`	`height: 0!important;`