Merge pull request #6752 from surveyjs/issue/6749-Incorrect-expand-co…

…llapse-cell-width-in-Matrix-Dropdown-Detailed #6749 Incorrect expand-collapse cell width in Matrix Dropdown Detailed
surveyjs · Aug 18, 2023 · 7bc48b3 · 7bc48b3
2 parents 3263622 + 9ea7fe4
commit 7bc48b3
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 4 deletions.
diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -427,6 +427,7 @@ export var defaultV2Css = {
     detailIconExpanded: "sd-detail-panel__icon--expanded",
     detailIconId: "icon-expanddetail",
     detailIconExpandedId: "icon-collapsedetail",
+    detailPanelCell: "sd-table__cell--detail-panel",
     actionsCell: "sd-table__cell sd-table__cell--actions",
     actionsCellDrag: "sd-table__cell--drag",
     emptyCell: "sd-table__cell--empty",

diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss
@@ -149,6 +149,10 @@
   width: calcSize(14);
 }
 
+.sd-matrixdropdown .sd-table__cell--header.sd-table__cell--action {
+  min-width: calcSize(2);
+  width: calcSize(2);
+}
 .sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty) {
   min-width: calcSize(14);
   width: calcSize(14);

diff --git a/src/question_matrixdropdownrendered.ts b/src/question_matrixdropdownrendered.ts
@@ -392,10 +392,10 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
     if (!isShown) return;
     this.headerRowValue = this.createRenderedRow(this.cssClasses);
     if (this.allowRowsDragAndDrop) {
-      this.headerRow.cells.push(this.createHeaderCell(null));
+      this.headerRow.cells.push(this.createHeaderCell(null, "action"));
     }
     if (this.hasActionCellInRows("start")) {
-      this.headerRow.cells.push(this.createHeaderCell(null));
+      this.headerRow.cells.push(this.createHeaderCell(null, "action"));
     }
     if (this.matrix.hasRowText && this.matrix.showHeader) {
       this.headerRow.cells.push(this.createHeaderCell(null));
@@ -943,12 +943,13 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
       .toString();
   }
   private createHeaderCell(
-    column: MatrixDropdownColumn
+    column: MatrixDropdownColumn,
+    cellType: string = null
   ): QuestionMatrixDropdownRenderedCell {
     let cell = !!column ? this.createTextCell(column.locTitle) : this.createEmptyCell();
     cell.column = column;
     this.setHeaderCell(column, cell);
-    const cellType = (!!column && column.cellType !== "default") ? column.cellType : this.matrix.cellType;
+    if (!cellType) cellType = (!!column && column.cellType !== "default") ? column.cellType : this.matrix.cellType;
     this.setHeaderCellCssClasses(cell, cellType);
     return cell;
   }

diff --git a/...ssionTests/tests/defaultV2/etalons/question-matrix-dropdown-detail-expanded.png b/...ssionTests/tests/defaultV2/etalons/question-matrix-dropdown-detail-expanded.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/question-matrix-dropdown-detail.png b/visualRegressionTests/tests/defaultV2/etalons/question-matrix-dropdown-detail.png
diff --git a/visualRegressionTests/tests/defaultV2/matrix.ts b/visualRegressionTests/tests/defaultV2/matrix.ts
@@ -292,6 +292,81 @@ frameworks.forEach(framework => {
     });
   });
 
+  test("Matrix dropdown detail", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1200, 1200);
+      await initSurvey(framework, {
+        "logoPosition": "right",
+        "pages": [
+          {
+            "name": "page1",
+            "elements": [
+              {
+                "type": "matrixdropdown",
+                "name": "q",
+                "title": "Question",
+                "columns": [
+                  {
+                    "name": "Column 1",
+                    "title": "Title"
+                  },
+                  {
+                    "name": "Column 2",
+                    "title": "Title"
+                  },
+                  {
+                    "name": "Column 3",
+                    "title": "Title"
+                  }
+                ],
+                "rows": [
+                  "Row 1", "Row 2", "Row 3"
+                ],
+                "detailElements": [
+                  {
+                    "type": "text",
+                    "name": "question1",
+                    "titleLocation": "hidden"
+                  },
+                  {
+                    "type": "text",
+                    "name": "question2",
+                    "titleLocation": "hidden"
+                  },
+                  {
+                    "type": "text",
+                    "name": "question3",
+                    "titleLocation": "hidden"
+                  }
+                ],
+                "detailPanelMode": "underRow",
+                "choices": [
+                  1,
+                  2,
+                  3,
+                  4,
+                  5
+                ],
+                "cellType": "text"
+              }
+            ]
+          }
+        ],
+        "showQuestionNumbers": "off",
+        "widthMode": "static",
+        "width": "720px",
+        focusFirstQuestionAutomatic: false
+      });
+
+      const questionRoot = Selector(".sd-row");
+      await takeElementScreenshot("question-matrix-dropdown-detail.png", questionRoot, t, comparer);
+      await t.click(Selector(".sd-table__cell--detail-button").filterVisible().nth(1));
+
+      await takeElementScreenshot("question-matrix-dropdown-detail-expanded.png", questionRoot, t, comparer);
+
+    });
+  });
+
   test("Matrix dropdown", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(800, 600);