Features/7435 multipletext titlewidth (#7474)

* Add titleWidth property into multipletext #7435 * Add visual regression test #7435
surveyjs · Dec 8, 2023 · f6cc002 · f6cc002
1 parent c90aa0e
commit f6cc002
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 6 deletions.
diff --git a/packages/survey-angular-ui/src/questions/mutlipletextitem.component.html b/packages/survey-angular-ui/src/questions/mutlipletextitem.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="!model.isErrorsCell">
   <label [class]="question.getItemLabelCss(item)">
-    <span [class]="question.getItemTitleCss()">
+    <span [class]="question.getItemTitleCss()" [style]="{ minWidth: question.titleWidth, width: question.titleWidth }">
       <span *ngIf=" item.editor.isRequireTextBeforeTitle || item.editor.isRequireTextOnStart"
         [class]="question.cssClasses.requiredText">{{ item.editor.requiredText }}</span>
       <sv-ng-string [model]="item.locTitle"></sv-ng-string>

diff --git a/packages/survey-vue3-ui/src/MultipletextItem.vue b/packages/survey-vue3-ui/src/MultipletextItem.vue
@@ -1,6 +1,6 @@
 <template>
   <label v-if="!cell.isErrorsCell" :class="question.getItemLabelCss(item)">
-    <span :class="question.getItemTitleCss()">
+    <span :class="question.getItemTitleCss()" :style="{ minWidth: question.titleWidth, width: question.titleWidth }">
       <span
         v-if="
           item.editor.isRequireTextBeforeTitle ||

diff --git a/src/knockout/templates/question-multipletext.html b/src/knockout/templates/question-multipletext.html
@@ -6,7 +6,7 @@
         <td data-bind="css: cell.className">  
           <!-- ko ifnot: cell.isErrorsCell -->
           <label data-bind="css: question.getItemLabelCss(item)">
-              <span data-bind="css: question.koItemTitleCss">
+              <span data-bind="css: question.koItemTitleCss, style: {  minWidth: question.titleWidth, width: question.titleWidth }">
                 <!-- ko component: { name: 'survey-element-title-content', params: {element: cell.item.editor} } --><!-- /ko -->
               </span>
               <div data-bind="css: question.koItemCss, event: {focusin: cell.item.focusIn }">

diff --git a/src/question_multipletext.ts b/src/question_multipletext.ts
@@ -534,6 +534,15 @@ export class QuestionMultipleTextModel extends Question
   public set itemSize(val: number) {
     this.setPropertyValue("itemSize", val);
   }
+  /**
+   * A width for item. Accepts CSS values.
+   */
+  public get titleWidth(): string {
+    return this.getPropertyValue("titleWidth") || "";
+  }
+  public set titleWidth(val: string) {
+    this.setPropertyValue("titleWidth", val);
+  }
   @propertyArray() rows: Array<MutlipleTextRow>;
 
   protected onRowCreated(row: MutlipleTextRow) {
@@ -848,7 +857,8 @@ Serializer.addClass(
     { name: "!items:textitems", className: "multipletextitem", isArray: true },
     { name: "itemSize:number", minValue: 0 },
     { name: "colCount:number", default: 1, choices: [1, 2, 3, 4, 5] },
-    { name: "itemErrorLocation", default: "default", choices: ["default", "top", "bottom"], visible: false }
+    { name: "itemErrorLocation", default: "default", choices: ["default", "top", "bottom"], visible: false },
+    { name: "titleWidth", category: "layout" }
   ],
   function () {
     return new QuestionMultipleTextModel("");

diff --git a/src/react/reactquestion_multipletext.tsx b/src/react/reactquestion_multipletext.tsx
@@ -78,8 +78,13 @@ export class SurveyMultipleTextItem extends ReactSurveyElement {
   protected renderElement() {
     const item = this.item;
     const cssClasses = this.cssClasses;
+    const titleStyle: any = {};
+    if (!!this.question.titleWidth) {
+      titleStyle.minWidth = this.question.titleWidth;
+      titleStyle.width = this.question.titleWidth;
+    }
     return (<label className={this.question.getItemLabelCss(item)}>
-      <span className={cssClasses.itemTitle}>
+      <span className={cssClasses.itemTitle} style={titleStyle}>
         <TitleContent element={item.editor} cssClasses={item.editor.cssClasses}></TitleContent>
       </span>
       <SurveyMultipleTextItemEditor

diff --git a/src/vue/multipletextitem.vue b/src/vue/multipletextitem.vue
@@ -1,6 +1,6 @@
 <template>
    <label v-if="!cell.isErrorsCell" :class="question.getItemLabelCss(item)">
-    <span :class="question.getItemTitleCss()">
+    <span :class="question.getItemTitleCss()" :style="{ minWidth: question.titleWidth, width: question.titleWidth }">
       <span
         v-if="
           item.editor.isRequireTextBeforeTitle ||

diff --git a/visualRegressionTests/tests/defaultV2/etalons/mutlipletext-titlewidth.png b/visualRegressionTests/tests/defaultV2/etalons/mutlipletext-titlewidth.png
diff --git a/visualRegressionTests/tests/defaultV2/multipletext.ts b/visualRegressionTests/tests/defaultV2/multipletext.ts
@@ -98,4 +98,36 @@ frameworks.forEach(framework => {
       await takeElementScreenshot("mutlipletext-error-bottom.png", questionRoot, t, comparer);
     });
   });
+  test("Check multipletext titleWidth", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      await initSurvey(framework, {
+        width: "900px",
+        questions: [
+          {
+            type: "multipletext",
+            name: "q1",
+            titleWidth: "400px",
+            items: [
+              {
+                name: "item1",
+                title: "A very long first item title"
+              },
+              {
+                name: "item2",
+                title: "A medium long title"
+              },
+              {
+                name: "item3",
+                title: "Short title"
+              },
+            ]
+          },
+        ]
+      });
+
+      const questionRoot = Selector(".sd-question");
+      await takeElementScreenshot("mutlipletext-titlewidth.png", questionRoot, t, comparer);
+    });
+  });
 });