In Auto Width mode, a matrix column width in pixels is not applied (#…

…7990) * In Auto Width mode, a matrix column width in pixels is not applied Fixes #7978 * #7978 - update markup classes and tests * #7978 - one more markup snapshot --------- Co-authored-by: Aleksey Novikov <[email protected]>
surveyjs · Mar 19, 2024 · 7e43af8 · 7e43af8
1 parent ba9da5b
commit 7e43af8
Show file tree

Hide file tree

Showing 13 changed files with 120 additions and 8 deletions.
diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -414,6 +414,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",
+    columnsAutoWidth: "sd-table--columnsautowidth",
     noHeader: "sd-table--no-header",
     rootVerticalAlignTop: "sd-table--align-top",
     rootVerticalAlignMiddle: "sd-table--align-middle",
@@ -442,6 +443,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",
+    columnsAutoWidth: "sd-table--columnsautowidth",
     noHeader: "sd-table--no-header",
     hasFooter: "sd-table--has-footer",
     rootVerticalAlignTop: "sd-table--align-top",
@@ -484,6 +486,7 @@ export var defaultV2Css = {
     rootScroll: "sd-question--scroll",
     empty: "sd-question--empty",
     root: "sd-table sd-matrixdynamic",
+    columnsAutoWidth: "sd-table--columnsautowidth",
     noHeader: "sd-table--no-header",
     hasFooter: "sd-table--has-footer",
     tableWrapper: "sd-table-wrapper",

diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss
@@ -17,7 +17,7 @@
   background-clip: padding-box;
 }
 
-.sd-root-modern:not(.sd-root-modern--mobile) {
+.sd-table.sd-table--columnsautowidth {
   .sd-table__cell:not(.sd-table__cell--actions):not(.sd-table__cell--action):not(.sd-table__cell--empty.sd-table__cell--error) {
     width: 10000px;
   }

diff --git a/src/martixBase.ts b/src/martixBase.ts
@@ -5,6 +5,7 @@ import { property, Serializer } from "./jsonobject";
 import { ConditionRunner } from "./conditions";
 import { Helpers } from "./helpers";
 import { CssClassBuilder } from "./utils/cssClassBuilder";
+import { ComputedUpdater } from "./base";
 
 /**
  * A base class for all matrix question types.
@@ -305,9 +306,13 @@ export class QuestionMatrixBaseModel<TRow, TColumn> extends Question {
     return true;
   }
 
+  protected get columnsAutoWidth() {
+    return !this.isMobile && !this.columns.some(col => !!col.width);
+  }
   public getTableCss(): string {
     return new CssClassBuilder()
       .append(this.cssClasses.root)
+      .append(this.cssClasses.columnsAutoWidth, this.columnsAutoWidth)
       .append(this.cssClasses.noHeader, !this.showHeader)
       .append(this.cssClasses.hasFooter, !!this.renderedTable?.showAddRowOnBottom)
       .append(this.cssClasses.rootAlternateRows, this.alternateRows)

diff --git a/tests/markup/snapshots/matrix-v2.snap.html b/tests/markup/snapshots/matrix-v2.snap.html
@@ -1,7 +1,7 @@
 <div class="sd-matrix sd-table-wrapper">
 	<fieldset>
 		<legend class="sv-hidden">matrix</legend>
-		<table class="sd-matrix__table sd-table sd-table--align-middle">
+		<table class="sd-matrix__table sd-table sd-table--align-middle sd-table--columnsautowidth">
 			<thead>
 				<tr>
 					<td>

diff --git a/tests/markup/snapshots/matrixdropdown-cell-errors-bottom.snap.html b/tests/markup/snapshots/matrixdropdown-cell-errors-bottom.snap.html
@@ -1,5 +1,5 @@
 <div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle">
+	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
 		<thead>
 			<tr>
 				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">

diff --git a/tests/markup/snapshots/matrixdropdown-cell-errors-top.snap.html b/tests/markup/snapshots/matrixdropdown-cell-errors-top.snap.html
@@ -1,5 +1,5 @@
 <div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle">
+	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
 		<thead>
 			<tr>
 				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">

diff --git a/tests/markup/snapshots/matrixdropdown-vertical.snap.html b/tests/markup/snapshots/matrixdropdown-vertical.snap.html
@@ -1,5 +1,5 @@
 <div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle">
+	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
 		<thead>
 			<tr>
 				<td class="sd-table__cell sd-table__cell--empty sd-table__cell--header sd-table__cell--text">

diff --git a/tests/markup/snapshots/matrixdropdown.snap.html b/tests/markup/snapshots/matrixdropdown.snap.html
@@ -1,5 +1,5 @@
 <div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle">
+	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
 		<thead>
 			<tr>
 				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--empty sd-table__cell--header sd-table__cell--text">

diff --git a/tests/markup/snapshots/matrixdynamic-defaultV2.snap.html b/tests/markup/snapshots/matrixdynamic-defaultV2.snap.html
@@ -1,6 +1,6 @@
 <div>
 	<div class="sd-table-wrapper">
-		<table class="sd-matrixdynamic sd-table sd-table--has-footer">
+		<table class="sd-matrixdynamic sd-table sd-table--columnsautowidth sd-table--has-footer">
 			<thead>
 				<tr>
 					<th class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--header">

diff --git a/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns.snap.html b/tests/markup/snapshots/matrixdynamic-show-in-multiple-columns.snap.html
@@ -1,5 +1,5 @@
 <div class="sd-table-wrapper">
-	<table class="sd-matrixdropdown sd-table sd-table--align-middle">
+	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
 		<thead>
 			<tr>
 				<td class="sd-table__cell sd-table__cell--column-title sd-table__cell--dropdown sd-table__cell--empty sd-table__cell--header">

diff --git a/tests/question_matrixdropdownbasetests.ts b/tests/question_matrixdropdownbasetests.ts
@@ -92,6 +92,45 @@ QUnit.test("table vertical align and alternate rows", function (assert) {
   matrix.alternateRows = true;
   assert.equal(matrix.getTableCss(), "rootClass rootAlternateRowsClass rootVerticalAlignTopClass", "table css is rootAlternateRowsClass rootVerticalAlignMiddleClass");
 });
+
+QUnit.test("table autocolumn width", function (assert) {
+  var survey = new SurveyModel({
+    elements: [
+      {
+        type: "matrixdropdown",
+        name: "matrixd",
+        columns: ["c"]
+      },
+      {
+        type: "matrix",
+        name: "matrix",
+      },
+    ],
+  });
+
+  const matrixd = <QuestionMatrixDropdownModelBase>survey.getQuestionByName("matrixd");
+  const matrix = <QuestionMatrixDropdownModelBase>survey.getQuestionByName("matrix");
+
+  matrix.cssClasses.root = "rootClass";
+  matrix.cssClasses.columnsAutoWidth = "rootColumnsAutoWidth";
+  matrix.cssClasses.rootVerticalAlignMiddle = "";
+
+  matrixd.cssClasses.root = "rootClass";
+  matrixd.cssClasses.columnsAutoWidth = "rootColumnsAutoWidth";
+  matrixd.cssClasses.rootVerticalAlignMiddle = "";
+
+  assert.equal(matrix.getTableCss(), "rootClass rootColumnsAutoWidth", "matrix");
+  assert.equal(matrixd.getTableCss(), "rootClass rootColumnsAutoWidth", "matrixd");
+
+  matrixd.columns[0].width = "100px";
+  assert.equal(matrixd.getTableCss(), "rootClass", "matrixd");
+
+  matrixd.columns[0].width = "";
+  survey.setIsMobile(true);
+  assert.equal(matrix.getTableCss(), "rootClass", "matrix mobile");
+  assert.equal(matrixd.getTableCss(), "rootClass", "matrixd mobile");
+});
+
 QUnit.test("column.templateQuestion has set parentQuestion", function (assert) {
   var survey = new SurveyModel({
     elements: [

diff --git a/...ressionTests/tests/defaultV2/etalons/question-matrix-multi-select-col-width.png b/...ressionTests/tests/defaultV2/etalons/question-matrix-multi-select-col-width.png
diff --git a/visualRegressionTests/tests/defaultV2/matrix.ts b/visualRegressionTests/tests/defaultV2/matrix.ts
@@ -447,6 +447,71 @@ frameworks.forEach(framework => {
     });
   });
 
+  test("Matrix multi-select column width", 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",
+                    "width": "100px"
+                  },
+                  {
+                    "name": "Column 2",
+                    "title": "Title"
+                  },
+                  {
+                    "name": "Column 3",
+                    "title": "Title"
+                  }
+                ],
+                "choices": [
+                  1,
+                  2,
+                  3,
+                  4,
+                  5
+                ],
+                "cellType": "text",
+                "rows": [
+                  {
+                    "value": "Row 1",
+                    "text": "Title"
+                  },
+                  {
+                    "value": "Row 2",
+                    "text": "Title"
+                  },
+                  {
+                    "value": "Row 3",
+                    "text": "Title"
+                  }
+                ]
+              }
+            ]
+          }
+        ],
+        "showQuestionNumbers": "off",
+        "widthMode": "static",
+        "width": "720px",
+        focusFirstQuestionAutomatic: false
+      });
+
+      const questionRoot = Selector(".sd-row");
+      await takeElementScreenshot("question-matrix-multi-select-col-width.png", questionRoot, t, comparer);
+    });
+  });
+
   test("Matrix dynamic", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1200, 1200);