#7356 Error message location

Fixes #7356
surveyjs · Nov 16, 2023 · f81347c · f81347c
1 parent 59e388c
commit f81347c
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 1 deletion.
diff --git a/src/defaultV2-theme/blocks/sd-element.scss b/src/defaultV2-theme/blocks/sd-element.scss
@@ -129,6 +129,8 @@
   padding-bottom: var(--sd-base-padding);
   background: $question-background;
   box-shadow: $shadow-small;
+  display: flex;
+    flex-direction: column;
 }
 
 //compact styles

diff --git a/src/defaultV2-theme/blocks/sd-question.scss b/src/defaultV2-theme/blocks/sd-question.scss
@@ -44,7 +44,7 @@
 }
 
 .sd-element--with-frame>.sd-question__erbox--below-question {
-  margin-top: var(--sd-base-padding);
+  margin-top: auto;
   border-radius: 0 0 calcCornerRadius(1) calcCornerRadius(1);
 }
 
@@ -80,6 +80,9 @@
 
   &.sd-question--error-bottom {
     padding-bottom: 0;
+    &>.sd-question__content {
+        margin-bottom: var(--sd-base-vertical-padding)
+      }
   }
 
   &>.sd-question__erbox--outside-question {

diff --git a/...lRegressionTests/tests/defaultV2/etalons/question-with-error-below-one-line.png b/...lRegressionTests/tests/defaultV2/etalons/question-with-error-below-one-line.png
diff --git a/visualRegressionTests/tests/defaultV2/question.ts b/visualRegressionTests/tests/defaultV2/question.ts
@@ -449,6 +449,52 @@ frameworks.forEach(framework => {
     });
   });
 
+  test("Check question errors bottom one-row", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+
+      await t.resizeWindow(800, 800);
+      await initSurvey(framework, {
+        "pages": [
+          {
+            "name": "page1",
+            "elements": [
+              {
+                "type": "text",
+                "name": "question1"
+              },
+              {
+                "type": "text",
+                "name": "question2",
+                "startWithNewLine": false,
+                "isRequired": true
+              },
+              {
+                "type": "checkbox",
+                "name": "question3",
+                "choices": [
+                  "Item 1",
+                  "Item 2",
+                  "Item 3"
+                ]
+              },
+              {
+                "type": "text",
+                "name": "question4",
+                "startWithNewLine": false,
+                "isRequired": true
+              }
+            ]
+          }
+        ],
+        "questionErrorLocation": "bottom"
+      });
+      const pRoot = Selector(".sd-body");
+      await t.click(".sd-navigation__complete-btn");
+      await resetFocusToBody();
+      await takeElementScreenshot("question-with-error-below-one-line.png", pRoot, t, comparer);
+    });
+  });
+
   test("Check title location Left", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {