#8528 Radiogroup items appear in a single column regardless of the co…

…lCount property value when the Panelless theme mode is enabled (#8534) Fixes #8528
surveyjs · Jul 11, 2024 · b7c6d18 · b7c6d18
1 parent 7099f3e
commit b7c6d18
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 0 deletions.
diff --git a/src/defaultV2-theme/blocks/sd-title.scss b/src/defaultV2-theme/blocks/sd-title.scss
@@ -96,6 +96,10 @@
   }
 }
 
+.sd-root--compact .sd-title .sv-title-actions {
+  width: 100%;
+}
+
 .sd-action-title-bar {
   flex: 1 9 auto;
   min-width: calcSize(6);

diff --git a/...sionTests/tests/defaultV2/etalons/question-selectbase-zero-column-panelless.png b/...sionTests/tests/defaultV2/etalons/question-selectbase-zero-column-panelless.png
diff --git a/visualRegressionTests/tests/defaultV2/selectbase.ts b/visualRegressionTests/tests/defaultV2/selectbase.ts
@@ -155,4 +155,82 @@ frameworks.forEach(framework => {
 
     });
   });
+
+  test("Check rating smileys scale colored question themes", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(1920, 1080);
+      const focusBody = ClientFunction(() => { document.body.focus(); });
+
+      await initSurvey(framework, {
+        "logoPosition": "right",
+        "pages": [
+          {
+            "name": "page1",
+            "elements": [
+              {
+                "type": "radiogroup",
+                "name": "question1",
+                "startWithNewLine": false,
+                "title": "question1",
+                "choices": [
+                  "option1",
+                  "option2",
+                  "option3"
+                ],
+                "colCount": 3
+              }
+            ],
+            "title": "Personal Information"
+          }
+        ]
+      });
+
+      await ClientFunction(() => {
+        const themeJson = {
+          "themeName": "default",
+          "colorPalette": "light",
+          "isPanelless": true,
+          "cssVariables": {
+            "--sjs-corner-radius": "4px",
+            "--sjs-base-unit": "8px",
+            "--sjs-shadow-small": "0px 1px 2px 0px rgba(0, 0, 0, 0.15)",
+            "--sjs-shadow-inner": "inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)",
+            "--sjs-border-default": "rgba(0, 0, 0, 0.16)",
+            "--sjs-border-light": "rgba(0, 0, 0, 0.09)",
+            "--sjs-general-backcolor": "rgba(255, 255, 255, 1)",
+            "--sjs-general-backcolor-dark": "rgba(248, 248, 248, 1)",
+            "--sjs-general-backcolor-dim-light": "rgba(249, 249, 249, 1)",
+            "--sjs-general-backcolor-dim-dark": "rgba(243, 243, 243, 1)",
+            "--sjs-general-forecolor": "rgba(0, 0, 0, 0.91)",
+            "--sjs-general-forecolor-light": "rgba(0, 0, 0, 0.45)",
+            "--sjs-general-dim-forecolor": "rgba(0, 0, 0, 0.91)",
+            "--sjs-general-dim-forecolor-light": "rgba(0, 0, 0, 0.45)",
+            "--sjs-secondary-backcolor": "rgba(255, 152, 20, 1)",
+            "--sjs-secondary-backcolor-light": "rgba(255, 152, 20, 0.1)",
+            "--sjs-secondary-backcolor-semi-light": "rgba(255, 152, 20, 0.25)",
+            "--sjs-secondary-forecolor": "rgba(255, 255, 255, 1)",
+            "--sjs-secondary-forecolor-light": "rgba(255, 255, 255, 0.25)",
+            "--sjs-shadow-small-reset": "0px 0px 0px 0px rgba(0, 0, 0, 0.15)",
+            "--sjs-shadow-medium": "0px 2px 6px 0px rgba(0, 0, 0, 0.1)",
+            "--sjs-shadow-large": "0px 8px 16px 0px rgba(0, 0, 0, 0.1)",
+            "--sjs-shadow-inner-reset": "inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15)",
+            "--sjs-border-inside": "rgba(0, 0, 0, 0.16)",
+            "--sjs-general-backcolor-dim": "rgba(255, 255, 255, 1)",
+            "--sjs-primary-backcolor": "rgba(25, 179, 148, 1)",
+            "--sjs-primary-backcolor-dark": "rgba(20, 164, 139, 1)",
+            "--sjs-primary-backcolor-light": "rgba(25, 179, 148, 0.1)",
+            "--sjs-primary-forecolor": "rgba(255, 255, 255, 1)",
+            "--sjs-primary-forecolor-light": "rgba(255, 255, 255, 0.25)",
+            "--sjs-special-red": "rgba(229, 10, 62, 1)",
+            "--sjs-special-red-light": "rgba(229, 10, 62, 0.1)"
+          },
+        };
+        window["survey"].applyTheme(themeJson);
+      })();
+
+      const questionRoot = Selector(".sd-question .sd-question__content");
+      await focusBody();
+      await takeElementScreenshot("question-selectbase-zero-column-panelless", questionRoot, t, comparer);
+    });
+  });
 });