Browse Source

HUE-4375 [editor] Horizontal scrollbar can be hidden under the first fixed column

Enrico Berti 9 years ago
parent
commit
73ee047

+ 5 - 4
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -2551,13 +2551,14 @@ body {
   color: #aaa;
 }
 
-.dataTables_wrapper:hover > .hue-scrollbar-x-rail {
+.dataTables_wrapper:hover > .hue-scrollbar-x-rail, .hue-scrollbar-x-rail:hover {
   opacity: 0.75
 }
 
 .hue-scrollbar-x-rail {
   opacity: 0;
   position: fixed;
+  z-index: 10000;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
@@ -2566,7 +2567,7 @@ body {
   -o-transition: background-color .2s linear, opacity .2s linear;
   transition: background-color .2s linear, opacity .2s linear;
   bottom: 3px;
-  height: 10px;
+  height: 9px;
 }
 
 
@@ -2580,8 +2581,8 @@ body {
   -moz-transition: background-color .2s linear;
   -o-transition: background-color .2s linear;
   transition: background-color .2s linear;
-  bottom: 0;
-  height: 10px;
+  bottom: 1px;
+  height: 9px;
   z-index: 10000;
 }
 

+ 10 - 7
desktop/core/src/desktop/static/desktop/js/jquery.horizontalscrollbar.js

@@ -33,15 +33,17 @@
 
   function initWhenReady(el) {
     if ($(el).parents('.dataTables_wrapper').length > 0) {
-      var scrollingRatio = function () {
-        return $(el).parents('.dataTables_wrapper').width() - $(el).parents('.dataTables_wrapper').find('hue-scrollbar-x').width()
-      };
+      var colWidth = $(el).parents('.dataTables_wrapper').find('.jHueTableExtenderClonedContainerColumn').width() + 5;
       if ($(el).parents('.dataTables_wrapper').find('.hue-scrollbar-x-rail').length == 0 && $(el).parents('.dataTables_wrapper').width() < $(el).parents('.dataTables_wrapper')[0].scrollWidth) {
-        var colWidth = $(el).parents('.dataTables_wrapper').find('.jHueTableExtenderClonedContainerColumn').width() + 5;
+        $('.hue-scrollbar-x-rail').remove();
         var scrollbarRail = $('<div>');
         var scrollbar = $('<div>').addClass('hue-scrollbar-x');
         scrollbar.width(Math.max(20, $(el).parents('.dataTables_wrapper').width() * ($(el).parents('.dataTables_wrapper').width() / $(el).parents('.dataTables_wrapper')[0].scrollWidth)));
         scrollbar.appendTo(scrollbarRail);
+        try {
+          scrollbar.draggable('destroy');
+        }
+        catch (e) {}
         scrollbar.draggable({
           axis: 'x',
           containment: 'parent',
@@ -68,11 +70,12 @@
           scrollbar.css("left", ((scrollbarRail.width() - scrollbar.width()) * ($(el).parents('.dataTables_wrapper').scrollLeft() / ($(el).parents('.dataTables_wrapper')[0].scrollWidth - $(el).parents('.dataTables_wrapper').width()))) + "px");
         });
       } else {
-        var colWidth = $(el).parents('.dataTables_wrapper').find('.jHueTableExtenderClonedContainerColumn').width() + 5;
         $(el).parents('.dataTables_wrapper').find('.hue-scrollbar-x-rail').width($(el).parents(".dataTables_wrapper").width() - colWidth);
-        var scrollbarRail = $(el).parents('.dataTables_wrapper').find('.hue-scrollbar-x-rail');
         var scrollbar = $(el).parents('.dataTables_wrapper').find('.hue-scrollbar-x');
         scrollbar.width(Math.max(20, $(el).parents('.dataTables_wrapper').width() * ($(el).parents('.dataTables_wrapper').width() / $(el).parents('.dataTables_wrapper')[0].scrollWidth)));
+
+        var scrollbarRail = $(el).parents('.dataTables_wrapper').find('.hue-scrollbar-x-rail');
+        scrollbarRail.width($(el).parents(".dataTables_wrapper").width() - colWidth);
         scrollbar.css("left", ((scrollbarRail.width() - scrollbar.width()) * ($(el).parents('.dataTables_wrapper').scrollLeft() / ($(el).parents('.dataTables_wrapper')[0].scrollWidth - $(el).parents('.dataTables_wrapper').width()))) + "px");
       }
     }
@@ -82,7 +85,7 @@
     var el = this.element;
 
     var checkWidth = function () {
-      if ($(el).parents('.dataTables_wrapper').width() > 0) {
+      if ($(el).parents('.dataTables_wrapper').find('.jHueTableExtenderClonedContainerColumn').width() > 0) {
         initWhenReady(el);
       } else {
         window.setTimeout(checkWidth, 100);