Fixed https://github.com/surveyjs/service/issues/2255 - Improve check…

…boxes adaptivity
surveyjs · Jun 21, 2024 · 1003020 · 1003020
1 parent a4ee909
commit 1003020
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/src/question.ts b/src/question.ts
@@ -2526,7 +2526,7 @@ export class Question extends SurveyElement<Question>
     if (!!el && this.isDefaultRendering()) {
       const scrollableSelector = this.getObservedElementSelector();
       if (!scrollableSelector) return;
-      const defaultRootEl = el.querySelector(scrollableSelector);
+      const defaultRootEl: HTMLElement = el.querySelector(scrollableSelector) || el.matches(scrollableSelector) && el;
       if (!defaultRootEl) return;
       let isProcessed = false;
       let requiredWidth: number = undefined;
@@ -2537,7 +2537,7 @@ export class Question extends SurveyElement<Question>
           isProcessed = false;
         }
         const callback = () => {
-          const rootEl = <HTMLElement>el.querySelector(scrollableSelector);
+          const rootEl: HTMLElement = el.querySelector(scrollableSelector) || el.matches(scrollableSelector) && el;
           if (!requiredWidth && this.isDefaultRendering()) {
             requiredWidth = rootEl.scrollWidth;
           }

diff --git a/src/question_baseselect.ts b/src/question_baseselect.ts
@@ -12,7 +12,7 @@ import { ConditionRunner } from "./conditions";
 import { Helpers, HashTable } from "./helpers";
 import { settings } from "./settings";
 import { CssClassBuilder } from "./utils/cssClassBuilder";
-import { mergeValues } from "./utils/utils";
+import { classesToSelector, mergeValues } from "./utils/utils";
 
 /**
  * A base class for multiple-choice question types ([Checkboxes](https://surveyjs.io/form-library/documentation/questioncheckboxmodel), [Dropdown](https://surveyjs.io/form-library/documentation/questiondropdownmodel), [Radio Button Group](https://surveyjs.io/form-library/documentation/questionradiogroupmodel), etc.).
@@ -1833,8 +1833,27 @@ export class QuestionSelectBase extends Question {
     }
     return columns;
   }
+
+  protected getObservedElementSelector(): string {
+    return classesToSelector(this.cssClasses.mainRoot);
+  }
+
+  protected supportResponsiveness(): boolean {
+    return true;
+  }
+
+  @property() allowMultiColumns = true;
+  protected onBeforeSetCompactRenderer(): void {
+    super.onBeforeSetDesktopRenderer();
+    this.allowMultiColumns = false;
+  }
+  protected onBeforeSetDesktopRenderer(): void {
+    super.onBeforeSetDesktopRenderer();
+    this.allowMultiColumns = true;
+  }
+
   get hasColumns() {
-    return !this.isMobile &&
+    return !this.isMobile && this.allowMultiColumns &&
       (this.getCurrentColCount() > 1);
   }
   get rowLayout() {