#6642 Matrix wrong paddings - simple cases rechecked and fixed

Fixes #6642
surveyjs · Aug 11, 2023 · de196b1 · de196b1
1 parent afe40f0
commit de196b1
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -406,6 +406,7 @@ export var defaultV2Css = {
     mainRoot: "sd-element sd-question sd-row__question sd-element--complex sd-question--complex sd-question--table",
     rootScroll: "sd-question--scroll",
     root: "sd-table sd-matrixdropdown",
+    noHeader: "sd-table--no-header",
     rootVerticalAlignTop: "sd-table--align-top",
     rootVerticalAlignMiddle: "sd-table--align-middle",
     tableWrapper: "sd-table-wrapper",
@@ -436,6 +437,7 @@ export var defaultV2Css = {
     rootScroll: "sd-question--scroll",
     empty: "sd-question--empty",
     root: "sd-table sd-matrixdynamic",
+    noHeader: "sd-table--no-header",
     tableWrapper: "sd-table-wrapper",
     content: "sd-matrixdynamic__content sd-question__content",
     cell: "sd-table__cell",

diff --git a/src/defaultV2-theme/blocks/sd-matrixdynamic.scss b/src/defaultV2-theme/blocks/sd-matrixdynamic.scss
@@ -10,7 +10,7 @@
 }
 
 .sd-matrixdynamic__footer {
-  padding-top: calcSize(1);
+  padding-top: calcSize(2);
 }
 
 .sd-action.sd-matrixdynamic__remove-btn {

diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss
@@ -1,18 +1,26 @@
 .sd-table {
   width: 100%;
   background: $question-background;
-  border-collapse: collapse;
+  border-collapse: separate;
+    border-spacing: 0;
   white-space: normal;
-  table-layout: fixed;
-  &>tbody {
-    &>tr+tr {
-      border-top: calcSize(2) solid transparent;
+  &>thead>tr>th {
+      border-top: 0;
+      border-bottom: calcSize(2) solid transparent;
     }
   }
 
-  &>thead {
-    border-bottom: calcSize(2) solid transparent;
-  }
+.sd-table__cell {
+  border-top: calcSize(1) solid transparent;
+  border-bottom: calcSize(1) solid transparent;
+  background-clip: padding-box;
+}
+.sd-table__row:first-child>.sd-table__cell:not(.sd-question--error) {
+  border-top: 0;
+}
+
+.sd-table__row:last-child>.sd-table__cell:not(.sd-question--error) {
+  border-bottom: 0;
 }
 
 .sd-table--align-top {
@@ -71,9 +79,13 @@
   padding: 0 calcSize(1);
   color: $foreground;
   text-align: center;
+  &:not(.sd-table__cell--empty):not(.sd-table__cell--actions) {
+      min-width: calcSize(14);
+    }
 }
 
 .sd-table__cell--error {
+  border: none;
   padding: 0 calcSize(1);
 
   .sd-question__erbox--outside-question {
@@ -154,7 +166,9 @@
 }
 
 .sd-table__cell--detail-panel {
-  padding: 0 calcSize(1) calcSize(1);
+  border-top: calcSize(1) solid transparent;
+    padding: calcSize(3) calcSize(1) calcSize(4);
+    border-bottom: calcSize(1) solid transparent;
 }
 
 .sd-table__cell--actions,
@@ -166,6 +180,9 @@
 
 .sd-table__cell--actions:not(.sd-table__cell--vertical) {
   width: 0;
+  &:first-of-type {
+      padding-left: 0;
+    }
 }
 
 .sd-table__cell--detail-button {
@@ -224,7 +241,7 @@
 .sd-matrix__cell:first-of-type,
 .sd-matrix tr>td:first-of-type {
   position: sticky;
-  background: $question-background;
+  background-color: $question-background;
   z-index: 12;
 
   &:first-of-type {