Merge pull request #8397 from surveyjs/feature/layout

Set the same title width option for questions when titleLocation is left
surveyjs · Jun 17, 2024 · 39d819a · 39d819a
2 parents 8d5e0b0 + ecd042a
commit 39d819a
Show file tree

Hide file tree

Showing 13 changed files with 109 additions and 4 deletions.
diff --git a/packages/survey-angular-ui/src/components/element-header/element-header.component.ts b/packages/survey-angular-ui/src/components/element-header/element-header.component.ts
@@ -11,6 +11,9 @@ export class ElementHeaderComponent {
   @HostBinding("class") get rootClass(): string {
     return this.element.cssHeader;
   }
+  @HostBinding("style.width") get width(): string {
+    return this.element.titleWidth;
+  }
   @HostListener("click", ["$event"]) click(e: MouseEvent): void {
     if (this.element.clickTitleFunction !== undefined) {
       this.element.clickTitleFunction(e);

diff --git a/packages/survey-vue3-ui/src/ElementHeader.vue b/packages/survey-vue3-ui/src/ElementHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="element.cssHeader" @click="clickTitleFunction">
+  <div :class="element.cssHeader" @click="clickTitleFunction" :style="getStyle()">
     <survey-element-title :element="element" :css="css" />
     <div v-if="element.hasDescriptionUnderTitle" v-show="element.hasDescription" :class="element.cssDescription"
       :id="element.ariaDescriptionId">
@@ -18,4 +18,11 @@ const clickTitleFunction = (e: any) => {
     props.element.clickTitleFunction(e);
   }
 };
+const getStyle = () => {
+  const headerStyle: any = { width: undefined };
+  if("titleWidth" in props.element) {
+    headerStyle.width = props.element.titleWidth;
+  }
+  return headerStyle;
+};
 </script>
diff --git a/src/base-interfaces.ts b/src/base-interfaces.ts
@@ -321,6 +321,7 @@ export interface IParentElement {
 export interface IPanel extends ISurveyElement, IParentElement {
   getChildrenLayoutType(): string;
   getQuestionTitleLocation(): string;
+  getQuestionTitleWidth(): string;
   getQuestionStartIndex(): string;
   getQuestionErrorLocation(): string;
   parent: IPanel;

diff --git a/src/knockout/templates/questiontitle.html b/src/knockout/templates/questiontitle.html
@@ -1,5 +1,5 @@
 <script type="text/html" id="survey-question-title">
-  <div data-bind="css: question.cssHeader, click: function(m, e) { if(question.clickTitleFunction) return question.clickTitleFunction(e); }">
+  <div data-bind="css: question.cssHeader, style: { width: $data.titleWidth }, click: function(m, e) { if(question.clickTitleFunction) return question.clickTitleFunction(e); }">
     <!-- ko component: { name: 'survey-element-title', params: { element: $data } } --><!-- /ko -->
     <!-- ko if: $data.hasDescriptionUnderTitle -->
     <div data-bind="css: $data.cssDescription, visible: $data.hasDescription, attr: {'id': $data.ariaDescriptionId}">

diff --git a/src/panel.ts b/src/panel.ts
@@ -1104,6 +1104,10 @@ export class PanelModelBase extends SurveyElement<Question>
     if (this.parent) return this.parent.getQuestionTitleLocation();
     return this.survey ? this.survey.questionTitleLocation : "top";
   }
+  @property() questionTitleWidth: string;
+  getQuestionTitleWidth(): string {
+    return this.questionTitleWidth || this.parent && this.parent.getQuestionTitleWidth();
+  }
   protected getStartIndex(): string {
     if (!!this.parent) return this.parent.getQuestionStartIndex();
     if (!!this.survey) return this.survey.questionStartIndex;
@@ -2134,6 +2138,12 @@ Serializer.addClass(
     "visibleIf:condition",
     "enableIf:condition",
     "requiredIf:condition",
+    {
+      name: "questionTitleWidth",
+      visibleIf: function (obj: any) {
+        return !!obj && obj["getQuestionTitleLocation"]() === "left";
+      }
+    },
     {
       name: "questionTitleLocation",
       default: "default",

diff --git a/src/question.ts b/src/question.ts
@@ -682,6 +682,12 @@ export class Question extends SurveyElement<Question>
       this.clearValueIfInvisible();
     }
   }
+  public get titleWidth(): string {
+    if (this.getTitleLocation() === "left") {
+      if (!!this.parent) return this.parent.getQuestionTitleWidth();
+    }
+    return undefined;
+  }
   /**
    * Returns title location calculated based on the question's `titleLocation` property and the `questionTitleLocation` property of the question's containers (survey, page, or panel).
    * @see titleLocation

diff --git a/src/question_custom.ts b/src/question_custom.ts
@@ -716,6 +716,9 @@ export abstract class QuestionCustomModelBase extends Question
   getQuestionTitleLocation(): string {
     return "left";
   }
+  getQuestionTitleWidth(): string {
+    return undefined;
+  }
   getQuestionStartIndex(): string {
     return this.getStartIndex();
   }

diff --git a/src/question_multipletext.ts b/src/question_multipletext.ts
@@ -810,6 +810,9 @@ export class QuestionMultipleTextModel extends Question
   getQuestionTitleLocation(): string {
     return "left";
   }
+  getQuestionTitleWidth(): string {
+    return undefined;
+  }
   getQuestionStartIndex(): string {
     return this.getStartIndex();
   }

diff --git a/src/react/element-header.tsx b/src/react/element-header.tsx
@@ -19,8 +19,13 @@ export class SurveyElementHeader extends React.Component<any, any> {
 
     const additionalTitleToolbarElement = element.hasAdditionalTitleToolbar ? <SurveyActionBar model={element.additionalTitleToolbar}></SurveyActionBar> : null;
 
+    const headerStyle: any = { width: undefined };
+    if(element instanceof Question) {
+      headerStyle.width = element.titleWidth;
+    }
+
     return (
-      <div className={element.cssHeader} onClick={(e) => element.clickTitleFunction && element.clickTitleFunction(e.nativeEvent)}>
+      <div className={element.cssHeader} onClick={(e) => element.clickTitleFunction && element.clickTitleFunction(e.nativeEvent)} style={headerStyle}>
         {title}
         {description}
         {additionalTitleToolbarElement}

diff --git a/src/vue/elementheader.vue b/src/vue/elementheader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="element.cssHeader" @click="clickTitleFunction">
+  <div :class="element.cssHeader" @click="clickTitleFunction" :style="titleStyle">
     <survey-element-title :element="element" :css="css" />
     <div v-if="element.hasDescriptionUnderTitle" v-show="element.hasDescription" :class="element.cssDescription"
       :id="element.ariaDescriptionId">
@@ -24,6 +24,14 @@ export class ElementHeader extends Vue {
       (<any>this.element).clickTitleFunction(e);
     }
   }
+
+  get titleStyle() {
+    const headerStyle: any = { width: undefined };
+    if("titleWidth" in this.element) {
+      headerStyle.width = this.element.titleWidth;
+    }
+    return headerStyle;
+  }
 }
 Vue.component("survey-element-header", ElementHeader);
 export default ElementHeader;

diff --git a/tests/markup/etalon_page_panel.ts b/tests/markup/etalon_page_panel.ts
@@ -220,6 +220,29 @@ registerMarkupTest(
     snapshot: "page-swnl-title-v2",
   });
 
+registerMarkupTest({
+  name: "Test Page - start with new line Title",
+  json: {
+    "pages": [
+      {
+        "name": "page1",
+        "questionTitleLocation": "left",
+        "questionTitleWidth": "500px",
+        "elements": [
+          {
+            "type": "text",
+            "name": "name",
+            "title": "Employee name:",
+          }
+        ]
+      }]
+  },
+  before: () => StylesManager.applyTheme("defaultV2"),
+  after: () => StylesManager.applyTheme("default"),
+  event: "onAfterRenderPage",
+  snapshot: "page-questionTitleWidth",
+});
+
 registerMarkupTest(
   {
     name: "Test Panel - Panel/Questions titles and descriptions",

diff --git a/tests/markup/snapshots/page-questionTitleWidth.snap.html b/tests/markup/snapshots/page-questionTitleWidth.snap.html
@@ -0,0 +1,14 @@
+<div style="flex:1 1 100%; max-width:100%; min-width:min(100%, 300px);">
+	<div class="sd-element sd-element--with-frame sd-question sd-question--left sd-row__question sd-row__question--small" data-name="name" id="testid0">
+		<div class="sd-element__header sd-question__header sd-question__header--location--left" style="width:500px;">
+			<h5 class="sd-element__title sd-question__title sd-title" id="testid0_ariaTitle">
+				<span aria-hidden="true" class="sd-element__num" style="position:static;">1.</span>
+				<span>&nbsp;</span>
+				<span class="sv-string-viewer sv-string-viewer--multiline">Employee name:</span>
+			</h5>
+		</div>
+		<div class="sd-question__content sd-question__content--left sd-text__content" role="presentation">
+			<input aria-describedby="testid0_ariaDescription" aria-invalid="false" aria-labelledby="testid0_ariaTitle" aria-required="false" class="sd-input sd-text" id="testid0i" placeholder="" type="text">
+		</div>
+	</div>
+</div>
diff --git a/tests/surveytests.ts b/tests/surveytests.ts
@@ -6898,6 +6898,28 @@ QUnit.test("Define questionTitleLocation on Panel/Page level", function (
   assert.equal(q.getTitleLocation(), "top", "get from survey again");
 });
 
+QUnit.test("Define questionTitleWidth on Panel/Page level", function (assert) {
+  const survey = new SurveyModel();
+  const page = survey.addNewPage("page");
+  const panel = page.addNewPanel("panel");
+  const panel2 = panel.addNewPanel("panel2");
+  const q = <Question>panel2.addNewQuestion("text");
+  page.questionTitleLocation = "left";
+
+  assert.equal(q.titleWidth, undefined, "init");
+  page.questionTitleWidth = "500px";
+  assert.equal(q.titleWidth, "500px", "get from page");
+
+  panel.questionTitleWidth = "50%";
+  assert.equal(q.titleWidth, "50%", "get from panel");
+
+  panel2.questionTitleWidth = "200px";
+  assert.equal(q.titleWidth, "200px", "get from panel2");
+
+  q.titleLocation = "top";
+  assert.equal(q.titleWidth, undefined, "titleWidth available if titleLocation is left");
+});
+
 QUnit.test("Question property.page getChoices", function (assert) {
   var property = Serializer.findProperty("questionbase", "page");
   assert.ok(property, "page property is here");