#9118 Question and Description incorrect gap (#9119)

* #9118 Question and Description incorrect gap Fixes #9118 * #9118 Question and Description incorrect gap Fixes #9118 * #9118 Question and Description incorrect gap Fixes #9118 * #9118 fix knockout and vue
surveyjs · Nov 28, 2024 · 18f2790 · 18f2790
1 parent ba91144
commit 18f2790
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 10 deletions.
diff --git a/packages/survey-core/src/defaultCss/defaultV2Css.ts b/packages/survey-core/src/defaultCss/defaultV2Css.ts
@@ -223,7 +223,7 @@ export var defaultV2Css = {
     requiredText: "sd-question__required-text",
     number: "sd-element__num",
     description: "sd-description sd-question__description",
-    descriptionUnderInput: "sd-description sd-question__description sd-question__description--under-input",
+    descriptionUnderInput: "sd-question__description--under-input",
     comment: "sd-input sd-comment",
     other: "sd-input sd-comment",
     required: "sd-question--required",

diff --git a/packages/survey-core/src/question.ts b/packages/survey-core/src/question.ts
@@ -1113,8 +1113,8 @@ export class Question extends SurveyElement<Question>
   }
   protected getCssDescription(cssClasses: any): string {
     return new CssClassBuilder()
-      .append(cssClasses.description, this.hasDescriptionUnderTitle)
-      .append(cssClasses.descriptionUnderInput, this.hasDescriptionUnderInput)
+      .append(cssClasses.description)
+      .append(cssClasses.descriptionUnderInput, this.descriptionLocation == "underInput")
       .toString();
   }
   public showErrorOnCore(location: string): boolean {

diff --git a/packages/survey-core/tests/surveyElementTests.ts b/packages/survey-core/tests/surveyElementTests.ts
@@ -441,4 +441,16 @@ QUnit.test("wait for elements to render RenderingCompletedAwaiter by timeout", a
     assert.ok(q2.onAfterRenderElement.isEmpty);
     done();
   }, 500);
+});
+QUnit.test("description css should be calculated even if description is empty", function (assert) {
+  const json = {
+    "elements": [
+      { "type": "text", "name": "q1" },
+    ],
+  };
+
+  const survey = new SurveyModel(json);
+  const q = survey.getQuestionByName("q1");
+  assert.notOk(q.description);
+  assert.ok(q.cssDescription);
 });
diff --git a/packages/survey-core/tests/surveytests.ts b/packages/survey-core/tests/surveytests.ts
@@ -17499,16 +17499,16 @@ QUnit.test("check descriptionLocation change css classes", function (assert) {
   });
   survey.css = {
     question: {
-      description: "description_under_title",
+      description: "description_default",
       descriptionUnderInput: "description_under_input"
     }
   };
   const question = survey.getAllQuestions()[0];
-  assert.equal(question.cssDescription, "");
+  assert.equal(question.cssDescription, "description_default");
   question.descriptionLocation = "underTitle";
-  assert.equal(question.cssDescription, "description_under_title");
+  assert.equal(question.cssDescription, "description_default");
   question.descriptionLocation = "underInput";
-  assert.equal(question.cssDescription, "description_under_input");
+  assert.equal(question.cssDescription, "description_default description_under_input");
 });
 QUnit.test("Get first focused question on collapsed question", function (assert) {
   const survey = new SurveyModel({

diff --git a/packages/survey-vue3-ui/src/Question.vue b/packages/survey-vue3-ui/src/Question.vue
@@ -56,7 +56,7 @@
         />
         <div
           v-if="element.hasDescriptionUnderInput"
-          :class="element.cssClasses.descriptionUnderInput"
+          :class="element.cssDescription"
           :id="element.ariaDescriptionId"
         >
           <SvComponent

diff --git a/src/knockout/templates/questioncontent.html b/src/knockout/templates/questioncontent.html
@@ -27,7 +27,7 @@
     <!-- /ko -->
   <!-- /ko -->
   <!-- ko if: question.hasDescriptionUnderInput -->
-  <div data-bind="css: cssClasses.descriptionUnderInput, attr: {'id': question.ariaDescriptionId}">
+  <div data-bind="css: question.cssDescription, attr: {'id': question.ariaDescriptionId}">
     <!-- ko template: { name: 'survey-string', data: locDescription } -->
     <!-- /ko -->
   </div>

diff --git a/src/vue/element.vue b/src/vue/element.vue
@@ -49,7 +49,7 @@
       />
       <div
         v-if="!element.isPanel && element.hasDescriptionUnderInput"
-        :class="element.cssClasses.descriptionUnderInput"
+        :class="element.cssDescription"
         :id="element.ariaDescriptionId"
       >
         <survey-string :locString="element.locDescription" />