fixes #53, but only when useAbsolutePositioning: true

mkoryak · Feb 18, 2014 · 0df11c6 · 0df11c6
1 parent c924d06
commit 0df11c6
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 9 deletions.
diff --git a/_layouts/lite.html b/_layouts/lite.html
@@ -18,7 +18,7 @@
 
 
 
-<div class="container">
+
     <div style="border: 1px solid red; margin: 0 auto; width: 70%; padding: 15px; text-align: center; font-size: 17px; font-weight: bold;">
         From issue: <a href="https://github.com/mkoryak/floatThead/issues/{{ page.issue }}" target="_blank">https://github.com/mkoryak/floatThead/issues/{{ page.issue }}</a>
     </div>
@@ -45,6 +45,6 @@
             src="http://c.statcounter.com/8344784/0/b638e513/1/"
             alt="web analytics"></a></div></noscript>
     <!-- End of StatCounter Code for Default Guide -->
-</div>
+
 </body>
 </html>
diff --git a/jquery.floatThead.js b/jquery.floatThead.js
@@ -1,4 +1,4 @@
-// @preserve jQuery.floatThead 1.2.3 - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2014 Misha Koryak
+// @preserve jQuery.floatThead 1.2.4-DEV - http://mkoryak.github.io/floatThead/ - Copyright (c) 2012 - 2014 Misha Koryak
 // @license Licensed under http://creativecommons.org/licenses/by-sa/4.0/
 
 /* @author Misha Koryak
@@ -184,6 +184,7 @@
 
       var locked = $scrollContainer.length > 0;
       var wrappedContainer = false; //used with absolute positioning enabled. did we need to wrap the scrollContainer/table with a relative div?
+      var $wrapper = $([]); //used when absolute positioning enabled - wraps the table and the float container
       var absoluteToFixedOnScroll = ieVersion <= 9 && !locked && useAbsolutePositioning; //on ie using absolute positioning doesnt look good with window scrolling, so we change positon to fixed on scroll, and then change it back to absolute when done.
       var $floatTable = $("<table/>");
       var $floatColGroup = $("<colgroup/>");
@@ -230,10 +231,10 @@
           return $container;
         };
         if(locked){
-          var $relative = makeRelative($scrollContainer, true);
-          $relative.append($floatContainer);
+          $wrapper = makeRelative($scrollContainer, true);
+          $wrapper.append($floatContainer);
         } else {
-          makeRelative($table);
+          $wrapper = makeRelative($table);
           $table.after($floatContainer);
         }
       } else {
@@ -247,11 +248,12 @@
         top:  useAbsolutePositioning ? 0 : 'auto',
         zIndex: opts.zIndex
       });
-      $floatContainer.addClass(opts.floatContainerClass)
+      $floatContainer.addClass(opts.floatContainerClass);
       updateScrollingOffsets();
 
       var layoutFixed = {'table-layout': 'fixed'};
       var layoutAuto = {'table-layout': $table.css('tableLayout') || 'auto'};
+      var originalTableWidth = $table[0].style.width || "auto";
 
       function setHeaderHeight(){
         var headerHeight = $header.find(opts.cellTag).outerHeight(true);
@@ -318,6 +320,13 @@
       function refloat(){ //make the thing float
         if(!headerFloated){
           headerFloated = true;
+          if(!locked && $wrapper.length){ //#53
+            var tableWidth = $table.width();
+            var wrapperWidth = $wrapper.width();
+            if(tableWidth > wrapperWidth){
+              $table.width(tableWidth);
+            }
+          }
           $table.css(layoutFixed);
           $floatTable.css(layoutFixed);
           $floatTable.append($header); //append because colgroup must go first in chrome
@@ -328,6 +337,9 @@
       function unfloat(){ //put the header back into the table
         if(headerFloated){
           headerFloated = false;
+          if(!locked && $wrapper.length){ //#53
+            $table.width(originalTableWidth);
+          }
           $newHeader.detach();
           $table.prepend($header);
           $table.css(layoutAuto);
@@ -604,6 +616,7 @@
       //attach some useful functions to the table.
       $table.data('floatThead-attached', {
         destroy: function(){
+          unfloat();
           $table.css(layoutAuto);
           $tableColGroup.remove();
           isChrome && $fthGrp.remove();

diff --git a/tests/misaligned-header.html b/tests/misaligned-header.html
@@ -29,11 +29,19 @@
 
 <script type="text/javascript">
     $(document).ready(function () {
-        $("table").floatThead();
+        $("table").floatThead({
+            useAbsolutePositioning: true
+        });
     });
 
 </script>
-
+<p>
+    If the table is wider than the wrapping container, then we must set its width when the header is floated, and put it back to old style on unfloat.
+<br/>
+    currently this is still broken if using useAbsolutePositioning: false. I can check if the issue may happen by wrapping the table with a div.
+    <br/>
+    for now, wont fix since workaround exists
+</p>
 <table>
 <thead>
 <tr>