From b29fa07501544fc9156bfa4afcdcadab8c7c805a Mon Sep 17 00:00:00 2001
From: Allan Jardine <allan.jardine@sprymedia.co.uk>
Date: Wed, 5 Feb 2014 10:32:33 +0000
Subject: [PATCH] Fix: Possible column misalignment when scrolling is enabled

- This is caused due to different content in the displayed header and
  the size forcing header in the body scrolling table. The browsers can
  lay the two tables out differently even although the widths applied
  are identical, due to the different content.

- The fix is to keep the content in the scroll body header, but hide it
  by wrapping in a div which has height 0 and overflow hidden

- See thread 19311 for more information
---
 .datatables-commit-sync         |  2 +-
 media/css/jquery.dataTables.css |  7 +++++++
 media/js/jquery.dataTables.js   | 10 +++++++---
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/.datatables-commit-sync b/.datatables-commit-sync
index 7caa7b83..c966d16e 100644
--- a/.datatables-commit-sync
+++ b/.datatables-commit-sync
@@ -1 +1 @@
-a931f2b4aeb3f699cbda26245bdc590079044eed
+0bad6ae070822c2ed55a47610f7f6262926353d5
diff --git a/media/css/jquery.dataTables.css b/media/css/jquery.dataTables.css
index 516e4d07..c56e4287 100644
--- a/media/css/jquery.dataTables.css
+++ b/media/css/jquery.dataTables.css
@@ -354,6 +354,13 @@ table.dataTable td {
   *margin-top: -1px;
   -webkit-overflow-scrolling: touch;
 }
+.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th > div.dataTables_sizing,
+.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td > div.dataTables_sizing {
+  height: 0;
+  overflow: hidden;
+  margin: 0 !important;
+  padding: 0 !important;
+}
 .dataTables_wrapper.no-footer .dataTables_scrollBody {
   border-bottom: 1px solid #111111;
 }
diff --git a/media/js/jquery.dataTables.js b/media/js/jquery.dataTables.js
index da4fca2f..f3c09512 100644
--- a/media/js/jquery.dataTables.js
+++ b/media/js/jquery.dataTables.js
@@ -3504,6 +3504,7 @@
 			headerSrcEls, footerSrcEls,
 			headerCopy, footerCopy,
 			headerWidths=[], footerWidths=[],
+			headerContent=[],
 			idx, correction, sanityWidth,
 			zeroOut = function(nSizer) {
 				var style = nSizer.style;
@@ -3614,6 +3615,7 @@
 	
 		// Read all widths in next pass
 		_fnApplyToChildren( function(nSizer) {
+			headerContent.push( nSizer.innerHTML );
 			headerWidths.push( _fnStringToCss( $(nSizer).css('width') ) );
 		}, headerSrcEls );
 	
@@ -3645,10 +3647,12 @@
 		 * 3. Apply the measurements
 		 */
 	
-		// "Hide" the header and footer that we used for the sizing. We want to also fix their width
-		// to what they currently are
+		// "Hide" the header and footer that we used for the sizing. We need to keep
+		// the content of the cell so that the width applied to the header and body
+		// both match, but we want to hide it completely. We want to also fix their
+		// width to what they currently are
 		_fnApplyToChildren( function(nSizer, i) {
-			nSizer.innerHTML = "";
+			nSizer.innerHTML = '<div class="dataTables_sizing" style="height:0;overflow:hidden;">'+headerContent[i]+'</div>';
 			nSizer.style.width = headerWidths[i];
 		}, headerSrcEls );