Fix grid row borders and cell widget vertical alignment (#16200)

Previously the top-border for the first body row in the grid was
hidden, which caused it to blink during scrolling, when the first-child
element is moved using transforms. Moving the border to the bottom of
the cell seems to have to negative side-effects.

Fixes vertical alignment for contained widget renderers. All DIV
elements are rendered as inline-blocks by default (same as all
.v-widget elements).

Change-Id: I277f88953069846adbc475366161aabc0df96e15

1 files changed, 8 insertions, 5 deletions

diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss
index 0792566c5d..ed068a5efc 100644
--- a/WebContent/VAADIN/themes/base/grid/grid.scss
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -62,6 +62,12 @@ $v-grid-editor-background-color: $v-grid-row-background-color !default;
 
     > * {
       line-height: $v-line-height;
+      vertical-align: middle;
+    }
+
+    // Force div elements to inline-blocks by default to enable vertical centering
+    > div {
+      display: inline-block;
     }
 
     &.frozen {
@@ -81,17 +87,13 @@ $v-grid-editor-background-color: $v-grid-row-background-color !default;
 
   .#{$primaryStyleName}-row > td {
     border-left: $v-grid-cell-vertical-border;
-    border-top: $v-grid-cell-horizontal-border;
+    border-bottom: $v-grid-cell-horizontal-border;
 
     &:first-child {
       border-left: none;
     }
   }
 
-  tbody > .#{$primaryStyleName}-row:first-child > td {
-    border-top: none;
-  }
-
   .#{$primaryStyleName}-row-stripe > td {
     background-color: $v-grid-row-stripe-background-color;
   }
@@ -149,6 +151,7 @@ $v-grid-editor-background-color: $v-grid-row-background-color !default;
       font-weight: inherit;
       border-left: $v-grid-footer-border;
       border-top: $v-grid-footer-border;
+      border-bottom: none;
       line-height: $v-grid-footer-row-height;
 
       &:first-child {