Merge pull request #6598 from surveyjs/bug/range-color-input

Fix input color/range height
surveyjs · Jul 26, 2023 · d745188 · d745188
2 parents 8405ff0 + 41d68e4
commit d745188
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 0 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-input.scss b/src/defaultV2-theme/blocks/sd-input.scss
@@ -98,6 +98,13 @@
   width: calcSize(3);
 }
 
+.sd-input[type="color"],
+.sd-input[type="range"] {
+  box-sizing: content-box;
+  width: calc(100% - 4 * #{$base-unit});
+  height: multiply(1.5, $font-editorfont-size);
+}
+
 .sd-input[type="range"]::-webkit-slider-runnable-track {
   @include runnable-track;
 }

diff --git a/visualRegressionTests/tests/defaultV2/etalons/question-color.png b/visualRegressionTests/tests/defaultV2/etalons/question-color.png
diff --git a/visualRegressionTests/tests/defaultV2/etalons/question-text-range.png b/visualRegressionTests/tests/defaultV2/etalons/question-text-range.png
diff --git a/visualRegressionTests/tests/defaultV2/question.ts b/visualRegressionTests/tests/defaultV2/question.ts
@@ -57,6 +57,25 @@ frameworks.forEach(framework => {
     });
   });
 
+  test("Check question color", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      await initSurvey(framework, {
+        questions: [
+          {
+            type: "text",
+            inputType: "color",
+            name: "question_color",
+            width: "708px",
+            title: "Color question"
+          },
+        ]
+      });
+      const questionRoot = Selector(".sd-question");
+      await takeElementScreenshot("question-color.png", questionRoot, t, comparer);
+    });
+  });
+
   test("Check question num + expand/collapse", async (t) => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);