]> source.dussan.org Git - vaadin-framework.git/commitdiff
fix: Do not allow border to grow row height (#12254) 7.7.25
authorTatu Lund <tatu@vaadin.com>
Thu, 25 Mar 2021 09:07:37 +0000 (11:07 +0200)
committerGitHub <noreply@github.com>
Thu, 25 Mar 2021 09:07:37 +0000 (11:07 +0200)
* fix: Do not allow border to grow row height

If css grows row height the VSrollTable rowHeight logic does not work allways

Fixes: https://github.com/vaadin/framework/issues/12251
* Compensate change in default row height

* Merge branch '7.7' into fix12251

* Replace calc with round

* Make fix more pin-point

* The first row does not have border thus regular height

* Fix drag-drop styles

* Further fix in drag-and-drop style

* Update TableDropIndicatorValoTest-indicator_ANY_Chrome__indicator.png

themes/src/main/themes/VAADIN/themes/valo/components/_table.scss
uitest/reference-screenshots/TableDropIndicatorValoTest-indicator_ANY_Chrome__indicator.png

index 82435a4d416c71dd8772d0a59f3aaca1a5c85f73..d202aabe38aca8aab5e13b4a427fe44c07422d5a 100644 (file)
@@ -2,13 +2,14 @@
  *
  * @group table
  */
-$v-table-row-height: $v-unit-size !default;
+$v-table-border-width: first-number($v-border) !default;
 
 /**
  *
  * @group table
  */
-$v-table-border-width: first-number($v-border) !default;
+$v-table-row-height: $v-unit-size !default;
+$v-table-body-row-height: round($v-table-row-height + $v-table-border-width) !default;
 
 /**
  *
@@ -240,7 +241,7 @@ $v-table-background-color: null !default;
   .#{$primary-stylename}-cell-content {
     border-left: $v-table-border-width solid $border-color;
     overflow: hidden;
-    height: $v-table-row-height;
+    height: $v-table-body-row-height;
     vertical-align: middle;
 
     &:first-child {
@@ -290,9 +291,11 @@ $v-table-background-color: null !default;
 
   .#{$primary-stylename}-table td {
     border-top: $v-table-border-width solid $border-color;
+    box-sizing: border-box;
   }
 
   .#{$primary-stylename}-table tr:first-child > td {
+    height: $v-table-row-height;
     border-top: none;
   }
 
@@ -537,7 +540,7 @@ $v-table-background-color: null !default;
 
   .#{$primary-stylename}-row-drag-bottom td.#{$primary-stylename}-cell-content {
     border-bottom: 2px solid $v-focus-color;
-    height: $v-table-row-height - 2px;
+    height: $v-table-body-row-height - 2px;
   }
 
   .#{$primary-stylename}-row-drag-bottom .#{$primary-stylename}-cell-wrapper {
@@ -546,7 +549,7 @@ $v-table-background-color: null !default;
 
   .#{$primary-stylename}-row-drag-top td.#{$primary-stylename}-cell-content {
     border-top: 2px solid $v-focus-color;
-    height: $v-table-row-height - 2px + $v-table-border-width;
+    height: $v-table-body-row-height - 2px + $v-table-border-width;
   }
 
   .#{$primary-stylename}-row-drag-top .#{$primary-stylename}-cell-wrapper {
@@ -694,7 +697,7 @@ $v-table-background-color: null !default;
 
   .#{$primary-stylename}-row-drag-top .#{$primary-stylename}-cell-content,
   .#{$primary-stylename}-row-drag-bottom .#{$primary-stylename}-cell-content {
-    height: $v-table-row-height - 1px;
+    height: $v-table-body-row-height - 1px;
   }
 }
 
index c2486c58c286575bbf27f3408cbd663d7923d12f..fe10c93be244a3500e2aa2bea31e9fca604dade9 100755 (executable)
Binary files a/uitest/reference-screenshots/TableDropIndicatorValoTest-indicator_ANY_Chrome__indicator.png and b/uitest/reference-screenshots/TableDropIndicatorValoTest-indicator_ANY_Chrome__indicator.png differ