Browse Source

[spark] Add absolute positioning to table header extender

This correctly positions the cloned header in the result tables when scrolling (absolute instead of fixed).
Johan Ahlen 10 years ago
parent
commit
21932c9

+ 6 - 3
apps/spark/src/spark/templates/editor_components.mako

@@ -869,7 +869,8 @@ from django.utils.translation import ugettext as _
         $(el).jHueTableExtender({
           fixedHeader: true,
           includeNavigator: false,
-          parentId: snippet.id()
+          parentId: 'snippet_' + snippet.id(),
+          clonedContainerPosition: "absolute"
         });
       },
       "aoColumnDefs": [
@@ -895,7 +896,8 @@ from django.utils.translation import ugettext as _
     $(el).jHueTableExtender({
       fixedHeader: true,
       includeNavigator: false,
-      parentId: snippet.id()
+      parentId: 'snippet_' + snippet.id(),
+      clonedContainerPosition: "absolute"
     });
     $(".dataTables_filter").hide();
     var dataTableEl = $(el).parents(".dataTables_wrapper");
@@ -1187,7 +1189,8 @@ from django.utils.translation import ugettext as _
         _el.jHueTableExtender({
           fixedHeader: true,
           includeNavigator: false,
-          parentId: snippet.id()
+          parentId: 'snippet_' + snippet.id(),
+          clonedContainerPosition: "absolute"
         });
       });
     });

+ 8 - 2
desktop/core/src/desktop/static/desktop/js/jquery.tableextender.js

@@ -191,8 +191,14 @@
     var clonedTableContainer = $("<div>").width($(plugin.element).outerWidth());
     clonedTable.appendTo(clonedTableContainer);
 
-    var clonedTableVisibleContainer = $("<div>").attr("id", $(plugin.element).attr("id") + "jHueTableExtenderClonedContainer").addClass("jHueTableExtenderClonedContainer").width($(plugin.element).parent().width()).css("overflow-x", "hidden").css("top", ($(plugin.element).parent().offset().top - $(window).scrollTop()) + "px");
-    clonedTableVisibleContainer.css("position", "fixed");
+    var topPosition;
+    if (plugin.options.clonedContainerPosition == 'absolute') {
+      topPosition = $(plugin.element).parent().position().top - $(window).scrollTop();
+    } else {
+      topPosition = $(plugin.element).parent().offset().top - $(window).scrollTop();
+    }
+    var clonedTableVisibleContainer = $("<div>").attr("id", $(plugin.element).attr("id") + "jHueTableExtenderClonedContainer").addClass("jHueTableExtenderClonedContainer").width($(plugin.element).parent().width()).css("overflow-x", "hidden").css("top", topPosition + "px");
+    clonedTableVisibleContainer.css("position", plugin.options.clonedContainerPosition || "fixed");
 
     clonedTableContainer.appendTo(clonedTableVisibleContainer);
     clonedTableVisibleContainer.prependTo($(plugin.element).parent());