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 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 isProcessed = false; } const callback = () => { - const rootEl = 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() {