From 10030208ec53b2bb83ed9c406c0b1e861f16c6d4 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Fri, 21 Jun 2024 15:24:14 +0300
Subject: [PATCH] Fixed https://github.com/surveyjs/service/issues/2255 -
 Improve checkboxes adaptivity

---
 src/question.ts            |  4 ++--
 src/question_baseselect.ts | 23 +++++++++++++++++++++--
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/question.ts b/src/question.ts
index e6bfafda87..6d7bd119ec 100644
--- 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
index fbe00435d1..4903138e13 100644
--- 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() {