Adds a themeable background element for horizontal scrollbar (#13334)

Change-Id: I95622de533497b3d89bcdd2a782c6271aec0764f

diff --git a/WebContent/VAADIN/themes/base/escalator/escalator.scss b/WebContent/VAADIN/themes/base/escalator/escalator.scss
index 0246224fd3014a183125fa4a29eea73af43bec5c..f410cafa177d6be86f60569a4358a650486a9697 100644 (file)
--- a/WebContent/VAADIN/themes/base/escalator/escalator.scss
+++ b/WebContent/VAADIN/themes/base/escalator/escalator.scss
@@ -41,6 +41,12 @@ $border-color: #aaa;
        width: inherit; /* a decent default fallback */
 }
 
+.#{$primaryStyleName}-horizontalscrollbarbackground {
+       position: absolute;
+       bottom: 0;
+       width: 100%;
+}
+
 .#{$primaryStyleName}-header,
 .#{$primaryStyleName}-body,
 .#{$primaryStyleName}-footer {

diff --git a/client/src/com/vaadin/client/ui/grid/Escalator.java b/client/src/com/vaadin/client/ui/grid/Escalator.java
index 3fde3476e02e8130e140326787833cd8db02f0fa..4262ab53a06d2defd1638655d104a3ea64d06410 100644 (file)
--- a/client/src/com/vaadin/client/ui/grid/Escalator.java
+++ b/client/src/com/vaadin/client/ui/grid/Escalator.java
@@ -800,6 +800,17 @@ public class Escalator extends Widget implements RequiresResize, DeferredWorker
             horizontalScrollbar.getElement().getStyle()
                     .setLeft(frozenPixels, Unit.PX);
             horizontalScrollbar.setScrollPos(prevScrollPos);
+
+            /*
+             * only show the scrollbar wrapper if the scrollbar itself is
+             * visible.
+             */
+            if (horizontalScrollbar.showsScrollHandle()) {
+                horizontalScrollbarBackground.getStyle().clearDisplay();
+            } else {
+                horizontalScrollbarBackground.getStyle().setDisplay(
+                        Display.NONE);
+            }
         }
 
         /**
@@ -4039,6 +4050,9 @@ public class Escalator extends Widget implements RequiresResize, DeferredWorker
     private final ColumnConfigurationImpl columnConfiguration = new ColumnConfigurationImpl();
     private final DivElement tableWrapper;
 
+    private final DivElement horizontalScrollbarBackground = DivElement.as(DOM
+            .createDiv());
+
     private PositionFunction position;
 
     /** The cached width of the escalator, in pixels. */
@@ -4138,6 +4152,11 @@ public class Escalator extends Widget implements RequiresResize, DeferredWorker
         table.appendChild(bodyElem);
         table.appendChild(footElem);
 
+        Style hWrapperStyle = horizontalScrollbarBackground.getStyle();
+        hWrapperStyle.setDisplay(Display.NONE);
+        hWrapperStyle.setHeight(Util.getNativeScrollbarSize(), Unit.PX);
+        root.appendChild(horizontalScrollbarBackground);
+
         setStylePrimaryName("v-escalator");
 
         // init default dimensions
@@ -4655,6 +4674,8 @@ public class Escalator extends Widget implements RequiresResize, DeferredWorker
         horizontalScrollbar.setStylePrimaryName(style);
 
         UIObject.setStylePrimaryName(tableWrapper, style + "-tablewrapper");
+        UIObject.setStylePrimaryName(horizontalScrollbarBackground, style
+                + "-horizontalscrollbarbackground");
 
         header.setStylePrimaryName(style);
         body.setStylePrimaryName(style);