Merge pull request #6686 from surveyjs/issue/6642-Matrix-wrong-paddings

#6642 Matrix wrong paddings - simple cases

src/defaultCss/defaultV2Css.ts

@@ -379,6 +379,7 @@ export var defaultV2Css = {
     mainRoot: "sd-element sd-question sd-row__question sd-element--complex sd-question--complex sd-question--table",
     tableWrapper: "sd-matrix sd-table-wrapper",
     root: "sd-table sd-matrix__table",
+    noHeader: "sd-table--no-header",
     rootVerticalAlignTop: "sd-table--align-top",
     rootVerticalAlignMiddle: "sd-table--align-middle",
     rootAlternateRows: "sd-table--alternate-rows",
@@ -405,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",
@@ -425,6 +427,7 @@ export var defaultV2Css = {
     detailIconId: "icon-expanddetail",
     detailIconExpandedId: "icon-collapsedetail",
     actionsCell: "sd-table__cell sd-table__cell--actions",
+    actionsCellDrag: "sd-table__cell--drag",
     emptyCell: "sd-table__cell--empty",
     verticalCell: "sd-table__cell--vertical",
     cellQuestionWrapper: "sd-table__question-wrapper",
@@ -435,6 +438,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",
@@ -453,6 +457,7 @@ export var defaultV2Css = {
     detailIconExpandedId: "icon-collapsedetail",
     detailPanelCell: "sd-table__cell--detail-panel",
     actionsCell: "sd-table__cell sd-table__cell--actions",
+    actionsCellDrag: "sd-table__cell--drag",
     buttonAdd: "sd-matrixdynamic__add-btn",
     buttonRemove: "sd-action--negative sd-matrixdynamic__remove-btn",
     iconAdd: "",

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 {

src/defaultV2-theme/blocks/sd-table.scss

@@ -1,8 +1,26 @@
 .sd-table {
   width: 100%;
   background: $question-background;
-  border-collapse: collapse;
+  border-collapse: separate;
+    border-spacing: 0;
   white-space: normal;
+  &>thead>tr>th {
+      border-top: 0;
+      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-of-type>.sd-table__cell {
+  border-top: 0;
+}
+
+.sd-table__row:last-of-type>.sd-table__cell {
+  border-bottom: 0;
 }
 
 .sd-table--align-top {
@@ -11,11 +29,15 @@
   }
 }
 
+.sd-table--no-header {
+  padding-top: calcSize(3)
+}
 .sd-table--alternate-rows {
-  margin: 0 8px;
+  margin-left: calcSize(1);
+    margin-right: calcSize(1);
   width: calc(100% - 2 * #{$base-unit});
 
-  .sd-table__cell:first-of-type {
+    .sd-table__cell:not(.sd-table__cell--header):first-of-type {
     padding-left: calcSize(2);
   }
 
@@ -54,12 +76,16 @@
   font-weight: normal;
   font-size: $font-editorfont-size;
   line-height: multiply(1.5, $font-editorfont-size);
-  padding: calcSize(1);
+  padding: 0 calcSize(1);
   color: $foreground;
   text-align: center;
+  &:not(.sd-table__cell--empty):not(.sd-table__cell--actions):not(:empty) {
+      min-width: calcSize(14);
+    }
 }
 
 .sd-table__cell--error {
+  border: none;
   padding: 0 calcSize(1);
 
   .sd-question__erbox--outside-question {
@@ -111,7 +137,7 @@
 .sd-table__cell--header {
   font-weight: 600;
   vertical-align: top;
-  padding: calcSize(1.5) calcSize(1) calcSize(2.5);
+  padding: calcSize(1.5) calcSize(1);
 
   &:not(.sd-table__cell--empty) {
     min-width: calcSize(14);
@@ -140,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,
@@ -152,6 +180,9 @@
 
 .sd-table__cell--actions:not(.sd-table__cell--vertical) {
   width: 0;
+  &:not(.sd-table__cell--drag):first-of-type {
+      padding-left: 0;
+    }
 }
 
 .sd-table__cell--detail-button {
@@ -189,7 +220,7 @@
   font-weight: 600;
   text-align: left;
   min-width: calcSize(12);
-  padding: calcSize(2.5) calcSize(1);
+  padding: calcSize(1.5) calcSize(1);
 }
 
 .sd-matrixdynamic__content .sd-table__question-wrapper {
@@ -210,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 {
@@ -275,7 +306,7 @@
   }
 
   &>.sd-question__content {
-    padding-top: calcSize(2.5);
+    padding-top: calcSize(2);
     min-width: min-content;
   }
 
@@ -477,4 +508,7 @@
   .sd-boolean-root {
     margin: auto;
   }
+}
+.sd-table.sd-matrixdynamic {
+  table-layout: auto;
 }

src/martixBase.ts

@@ -304,6 +304,7 @@ export class QuestionMatrixBaseModel<TRow, TColumn> extends Question {
   public getTableCss(): string {
     return new CssClassBuilder()
       .append(this.cssClasses.root)
+      .append(this.cssClasses.noHeader, !this.showHeader)
       .append(this.cssClasses.rootAlternateRows, this.alternateRows)
       .append(this.cssClasses.rootVerticalAlignTop, (this.verticalAlign === "top"))
       .append(this.cssClasses.rootVerticalAlignMiddle, (this.verticalAlign === "middle")).toString();

src/question_matrixdropdownrendered.ts

@@ -528,12 +528,12 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
   private getRowDragCell(rowIndex: number) {
     const cell = new QuestionMatrixDropdownRenderedCell();
     cell.isDragHandlerCell = true;
-    cell.className = this.getActionsCellClassName();
+    cell.className = this.getActionsCellClassName(cell);
     cell.row = this.matrix.visibleRows[rowIndex];
     return cell;
   }
-  private getActionsCellClassName() :string {
-    return new CssClassBuilder().append(this.cssClasses.actionsCell).append(this.cssClasses.verticalCell, !this.matrix.isColumnLayoutHorizontal).toString();
+  private getActionsCellClassName(cell: QuestionMatrixDropdownRenderedCell = null): string {
+    return new CssClassBuilder().append(this.cssClasses.actionsCell).append(this.cssClasses.actionsCellDrag, cell?.isDragHandlerCell).append(this.cssClasses.verticalCell, !this.matrix.isColumnLayoutHorizontal).toString();
   }
   private getRowActionsCell(rowIndex: number, location: "start" | "end") {
     const rowActions = this.getRowActions(rowIndex, location);
@@ -548,7 +548,8 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
       const itemValue = new ItemValue(actionContainer);
       cell.item = itemValue;
       cell.isActionsCell = true;
-      cell.className = this.getActionsCellClassName();
+      cell.isDragHandlerCell = false;
+      cell.className = this.getActionsCellClassName(cell);
       cell.row = this.matrix.visibleRows[rowIndex];
       return cell;
     }
@@ -997,6 +998,10 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
   private createEmptyCell(): QuestionMatrixDropdownRenderedCell {
     const res = this.createTextCell(null);
     res.isEmpty = true;
+    res.className = new CssClassBuilder()
+      .append(this.cssClasses.cell)
+      .append(this.cssClasses.emptyCell)
+      .toString();
     return res;
   }
 }

tests/markup/snapshots/matrixdropdown-cell-errors-bottom.snap.html

@@ -23,7 +23,7 @@
 				</td>
 			</tr>
 			<tr class="sd-table__row">
-				<td class="sd-table__cell" colspan="1" data-responsive-title="" title="">
+				<td class="sd-table__cell sd-table__cell--empty" colspan="1" data-responsive-title="" title="">
 				</td>
 				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-bottom" colspan="1" data-responsive-title="" title="">
 					<div aria-live="polite" class="sd-question__erbox sd-question__erbox--below-question sd-question__erbox--outside-question" id="testid0row0cell1_errors" role="alert">

tests/markup/snapshots/matrixdropdown-cell-errors-top.snap.html

@@ -13,7 +13,7 @@
 		</thead>
 		<tbody>
 			<tr class="sd-table__row">
-				<td class="sd-table__cell" colspan="1" data-responsive-title="" title="">
+				<td class="sd-table__cell sd-table__cell--empty" colspan="1" data-responsive-title="" title="">
 				</td>
 				<td class="sd-table__cell sd-table__cell--error sd-table__cell--error-top" colspan="1" data-responsive-title="" title="">
 					<div aria-live="polite" class="sd-question__erbox sd-question__erbox--above-question sd-question__erbox--outside-question" id="testid0row1cell1_errors" role="alert">