Details row decorator and border positioning and sizes (#17423)

IE8 still isn't pixel perfect, but you can't have 'em all.

Change-Id: I1780441f130032503d783657103066f502dce570

2 files changed, 5 insertions, 10 deletions

diff --git a/WebContent/VAADIN/themes/base/escalator/escalator.scss b/WebContent/VAADIN/themes/base/escalator/escalator.scss
index bae95b299c..73d45854b9 100644
--- a/WebContent/VAADIN/themes/base/escalator/escalator.scss
+++ b/WebContent/VAADIN/themes/base/escalator/escalator.scss
@@ -136,20 +136,14 @@
   .#{$primaryStyleName}-spacer {
     position: absolute;
     display: block;
-    
+
     background-color: $background-color;
-    
+
     > td {
       width: 100%;
       height: 100%;
+      @include box-sizing(border-box);
     }
     
-    .v-ie8 &, .v-ie9 & {
-      // The inline style of margin-top from the <tbody> to offset the
-      // header's dimension is, for some strange reason, inherited into each
-      // contained <tr>. We need to cancel it:
-
-      margin-top: 0;
-    }
   }
 }
diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss
index ee503822b9..531abb1ff1 100644
--- a/WebContent/VAADIN/themes/base/grid/grid.scss
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -456,8 +456,9 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
   }
   
   .#{$primaryStyleName}-spacer-deco-container {
+    border-top: $v-grid-border-size solid transparent; // same size as table wrapper border 
     position: relative;
-    top: $v-grid-border-size;
+    top: 0; // escalator will override top for scrolling and margin-top for header offset.
     z-index: 5;
   }