diff --git a/packages/survey-core/src/panel.ts b/packages/survey-core/src/panel.ts index 36bd215e91..b49e11b117 100644 --- a/packages/survey-core/src/panel.ts +++ b/packages/survey-core/src/panel.ts @@ -21,7 +21,7 @@ import { ElementFactory, QuestionFactory } from "./questionfactory"; import { LocalizableString } from "./localizablestring"; import { OneAnswerRequiredError } from "./error"; import { settings } from "./settings"; -import { cleanHtmlElementAfterAnimation, findScrollableParent, getElementWidth, isElementVisible, roundTo2Decimals, prepareElementForVerticalAnimation, setPropertiesOnElementForAnimation } from "./utils/utils"; +import { cleanHtmlElementAfterAnimation, findScrollableParent, getElementWidth, isElementVisible, floorTo2Decimals, prepareElementForVerticalAnimation, setPropertiesOnElementForAnimation } from "./utils/utils"; import { SurveyError } from "./survey-error"; import { CssClassBuilder } from "./utils/cssClassBuilder"; import { IAction } from "./actions/action"; @@ -311,7 +311,7 @@ export class PanelModelBase extends SurveyElement private _columns: Array = undefined; private _columnsReady = false; - @propertyArray() layoutColumns: Array; + @propertyArray() gridLayoutColumns: Array; addElementCallback: (element: IElement) => void; removeElementCallback: (element: IElement) => void; @@ -329,7 +329,8 @@ export class PanelModelBase extends SurveyElement isAnimationEnabled: () => this.animationAllowed, getAnimatedElement: (row: QuestionRowModel) => row.getRootElement(), getLeaveOptions: (row: QuestionRowModel, info) => { - return { cssClass: this.cssClasses.rowLeave, + return { + cssClass: this.cssClasses.rowLeave, onBeforeRunAnimation: prepareElementForVerticalAnimation, onAfterRunAnimation: cleanHtmlElementAfterAnimation, @@ -419,7 +420,7 @@ export class PanelModelBase extends SurveyElement this.updateDescriptionVisibility(this.description); this.markQuestionListDirty(); this.onRowsChanged(); - this.layoutColumns.forEach(col => { + this.gridLayoutColumns.forEach(col => { col.onPropertyValueChangedCallback = this.onColumnPropertyValueChangedCallback; }); } @@ -1142,7 +1143,6 @@ export class PanelModelBase extends SurveyElement } curRowSpan += (el.colSpan || 1); }); - if (!userDefinedRow && curRowSpan > maxRowColSpan) maxRowColSpan = curRowSpan; }); return maxRowColSpan; @@ -1158,7 +1158,7 @@ export class PanelModelBase extends SurveyElement } }); if (!!remainingColCount) { - const oneColumnWidth = roundTo2Decimals((100 - remainingSpace) / remainingColCount); + const oneColumnWidth = floorTo2Decimals((100 - remainingSpace) / remainingColCount); for (let index = 0; index < columns.length; index++) { if (!columns[index].width) { columns[index].setPropertyValue("effectiveWidth", oneColumnWidth); @@ -1174,7 +1174,7 @@ export class PanelModelBase extends SurveyElement arrayChanges: ArrayChanges ) => { if (this._columnsReady) { - this.updateColumnWidth(this.layoutColumns); + this.updateColumnWidth(this.gridLayoutColumns); this.updateRootStyle(); } } @@ -1253,11 +1253,11 @@ export class PanelModelBase extends SurveyElement } protected generateColumns(): void { let maxRowColSpan = this.calcMaxRowColSpan(); - let columns = [].concat(this.layoutColumns); - if (maxRowColSpan <= this.layoutColumns.length) { - columns = this.layoutColumns.slice(0, maxRowColSpan); + let columns = [].concat(this.gridLayoutColumns); + if (maxRowColSpan <= this.gridLayoutColumns.length) { + columns = this.gridLayoutColumns.slice(0, maxRowColSpan); } else { - for (let index = this.layoutColumns.length; index < maxRowColSpan; index++) { + for (let index = this.gridLayoutColumns.length; index < maxRowColSpan; index++) { const newCol = new PanelLayoutColumnModel(); newCol.onPropertyValueChangedCallback = this.onColumnPropertyValueChangedCallback; columns.push(newCol); @@ -1271,7 +1271,13 @@ export class PanelModelBase extends SurveyElement finally { this._columnsReady = true; } - this.layoutColumns = columns; + this.gridLayoutColumns = columns; + } + public updateGridColumns(): void { + this.updateColumns(); + this.elements.forEach(el => { + el.isPanel && (el as PanelModelBase).updateGridColumns(); + }); } public getColumsForElement(el: IElement): Array { const row = this.findRowByElement(el); @@ -2027,13 +2033,13 @@ export class PanelModelBase extends SurveyElement public getSerializableColumnsValue(): Array { let tailIndex = -1; - for (let index = this.layoutColumns.length - 1; index >= 0; index--) { - if (!this.layoutColumns[index].isEmpty()) { + for (let index = this.gridLayoutColumns.length - 1; index >= 0; index--) { + if (!this.gridLayoutColumns[index].isEmpty()) { tailIndex = index; break; } } - return this.layoutColumns.slice(0, tailIndex + 1); + return this.gridLayoutColumns.slice(0, tailIndex + 1); } public afterRender(el: HTMLElement): void { this.afterRenderCore(el); @@ -2450,7 +2456,7 @@ Serializer.addClass( choices: ["default", "top", "bottom", "left", "hidden"], }, { - name: "layoutColumns:panellayoutcolumns", + name: "gridLayoutColumns:panellayoutcolumns", className: "panellayoutcolumn", isArray: true, onSerializeValue: (obj: any): any => { return obj.getSerializableColumnsValue(); }, visibleIf: function (obj: any) { return !!obj && !!obj.survey && obj.survey.gridLayoutEnabled; } diff --git a/packages/survey-core/src/survey-element.ts b/packages/survey-core/src/survey-element.ts index d908ae00f0..5895768f86 100644 --- a/packages/survey-core/src/survey-element.ts +++ b/packages/survey-core/src/survey-element.ts @@ -1061,11 +1061,11 @@ export class SurveyElement extends SurveyElementCore implements ISurvey const columns = this.parent.getColumsForElement(this as any); _width = columns.reduce((sum, col) => col.effectiveWidth + sum, 0); if (!!_width && _width !== 100) { - style["flexGrow"] = 0; + style["flexGrow"] = 1; style["flexShrink"] = 0; style["flexBasis"] = _width + "%"; style["minWidth"] = undefined; - style["maxWidth"] = undefined; + style["maxWidth"] = this.maxWidth; } } if (Object.keys(style).length == 0) { diff --git a/packages/survey-core/src/survey.ts b/packages/survey-core/src/survey.ts index dd2c6b8fc3..e7cd987985 100644 --- a/packages/survey-core/src/survey.ts +++ b/packages/survey-core/src/survey.ts @@ -7318,7 +7318,14 @@ export class SurveyModel extends SurveyElementCore public set showTimerPanelMode(val: string) { this.timerInfoMode = this.getTimerInfoVal(val); } - @property() gridLayoutEnabled: boolean; + @property({ + onSet: (newValue: boolean, target: SurveyModel) => { + target.updateGridColumns(); + } + }) gridLayoutEnabled: boolean; + public updateGridColumns(): void { + this.pages.forEach(page => page.updateGridColumns()); + } /** * Specifies how to calculate the survey width. * diff --git a/packages/survey-core/src/utils/utils.ts b/packages/survey-core/src/utils/utils.ts index 9575574b10..bf4bee2954 100644 --- a/packages/survey-core/src/utils/utils.ts +++ b/packages/survey-core/src/utils/utils.ts @@ -812,8 +812,8 @@ export function cleanHtmlElementAfterAnimation(el: HTMLElement): void { delete (el as any)["__sv_created_properties"]; } } -export function roundTo2Decimals(number: number): number { - return Math.round(number * 100) / 100; +export function floorTo2Decimals(number: number): number { + return Math.floor(number * 100) / 100; } export { diff --git a/packages/survey-core/tests/layout_tests.ts b/packages/survey-core/tests/layout_tests.ts index c28245a94c..189f11cdc9 100644 --- a/packages/survey-core/tests/layout_tests.ts +++ b/packages/survey-core/tests/layout_tests.ts @@ -2,7 +2,7 @@ import { ArrayChanges, Base } from "../src/base"; import { Serializer } from "../src/jsonobject"; import { QuestionTextModel } from "../src/question_text"; import { SurveyModel } from "../src/survey"; -import { roundTo2Decimals } from "../src/utils/utils"; +import { floorTo2Decimals } from "../src/utils/utils"; export default QUnit.module("Layout:"); @@ -38,16 +38,16 @@ QUnit.test("columns generate - simple", function (assert) { assert.equal(page.rows.length, 2, "There are two rows"); assert.equal(page.columns.length, 3); assert.equal(page.columns[0].width, undefined); - assert.equal(roundTo2Decimals(page.columns[0].effectiveWidth), 33.33); + assert.equal(floorTo2Decimals(page.columns[0].effectiveWidth), 33.33); assert.equal(page.getColumsForElement(q1).length, 1); assert.deepEqual(page.getColumsForElement(q1), [page.columns[0]], "q1"); assert.equal(page.getColumsForElement(q2).length, 2); - assert.deepEqual(page.getColumsForElement(q2), [page.columns[1], page.columns[1]], "q2"); + assert.deepEqual(page.getColumsForElement(q2), [page.columns[1], page.columns[2]], "q2"); assert.equal(page.getColumsForElement(q3).length, 1); assert.deepEqual(page.getColumsForElement(q3), [page.columns[0]], "q3"); assert.equal(page.getColumsForElement(q4).length, 2); - assert.deepEqual(page.getColumsForElement(q4), [page.columns[1], page.columns[1]], "q4"); + assert.deepEqual(page.getColumsForElement(q4), [page.columns[1], page.columns[2]], "q4"); }); QUnit.test("columns generate - complex", function (assert) { @@ -83,7 +83,7 @@ QUnit.test("columns generate - complex", function (assert) { assert.equal(page.rows.length, 2, "There are two rows"); assert.equal(page.columns.length, 3); assert.equal(page.columns[0].width, undefined); - assert.equal(roundTo2Decimals(page.columns[0].effectiveWidth), 33.33); + assert.equal(floorTo2Decimals(page.columns[0].effectiveWidth), 33.33); assert.deepEqual(page.getColumsForElement(q1), [page.columns[0]]); assert.deepEqual(page.getColumsForElement(q2), [page.columns[1], page.columns[1]]); @@ -157,7 +157,7 @@ QUnit.test("user columns de/serialization", function (assert) { pages: [ { name: "page1", - layoutColumns: [ + gridLayoutColumns: [ { "width": 40, }, { "width": 45, @@ -167,21 +167,21 @@ QUnit.test("user columns de/serialization", function (assert) { }); const page = surveyModel.pages[0]; - assert.deepEqual(page.layoutColumns.length, 2); - assert.deepEqual(page.layoutColumns[0].width, 40); - assert.deepEqual(page.layoutColumns[0].questionTitleWidth, undefined); - assert.deepEqual(page.layoutColumns[1].width, 45); - assert.deepEqual(page.layoutColumns[1].questionTitleWidth, "200px"); + assert.deepEqual(page.gridLayoutColumns.length, 2); + assert.deepEqual(page.gridLayoutColumns[0].width, 40); + assert.deepEqual(page.gridLayoutColumns[0].questionTitleWidth, undefined); + assert.deepEqual(page.gridLayoutColumns[1].width, 45); + assert.deepEqual(page.gridLayoutColumns[1].questionTitleWidth, "200px"); - page.layoutColumns[0].width = 70; - page.layoutColumns[0].questionTitleWidth = "300px"; + page.gridLayoutColumns[0].width = 70; + page.gridLayoutColumns[0].questionTitleWidth = "300px"; const result = surveyModel.toJSON(); assert.deepEqual(result, { gridLayoutEnabled: true, pages: [ { name: "page1", - layoutColumns: [{ + gridLayoutColumns: [{ "questionTitleWidth": "300px", "width": 70, }, { @@ -211,19 +211,19 @@ QUnit.test("layout columns de/serialization", function (assert) { }; const surveyModel = new SurveyModel(json); const page = surveyModel.pages[0]; - assert.equal(page.layoutColumns.length, 3); + assert.equal(page.gridLayoutColumns.length, 3); const result = surveyModel.toJSON(); assert.deepEqual(result, json); }); -QUnit.test("apply columns from layoutColumns #1", function (assert) { +QUnit.test("apply columns from gridLayoutColumns #1", function (assert) { const surveyModel = new SurveyModel({ gridLayoutEnabled: true, pages: [ { name: "page1", - layoutColumns: [ + gridLayoutColumns: [ { "width": 40 } ], elements: [ @@ -246,13 +246,13 @@ QUnit.test("apply columns from layoutColumns #1", function (assert) { assert.equal(q2.rootStyle["flexBasis"], "60%"); }); -QUnit.test("apply columns from layoutColumns #2", function (assert) { +QUnit.test("apply columns from gridLayoutColumns #2", function (assert) { const surveyModel = new SurveyModel({ gridLayoutEnabled: true, pages: [ { name: "page1", - layoutColumns: [ + gridLayoutColumns: [ { "width": 20, }, { "width": 30, }, { "width": 25, }, @@ -286,13 +286,13 @@ QUnit.test("apply columns from layoutColumns #2", function (assert) { assert.equal(q3.rootStyle["flexBasis"], "50%", "q3 rootStyle flexBasis"); }); -QUnit.test("apply columns from layoutColumns with given colSpan", function (assert) { +QUnit.test("apply columns from gridLayoutColumns with given colSpan", function (assert) { const surveyModel = new SurveyModel({ gridLayoutEnabled: true, pages: [ { name: "page1", - layoutColumns: [ + gridLayoutColumns: [ { "width": 20, }, { "width": 30, }, { "width": 25, }, @@ -340,7 +340,7 @@ QUnit.test("check question width if column width is set for only one column", fu "startWithNewLine": false } ], - "layoutColumns": [ + "gridLayoutColumns": [ { "width": 25 }, {}, {} @@ -372,7 +372,6 @@ QUnit.test("effectiveColSpan #1", assert => { { "type": "text", "name": "q2", - "colSpan": 2, "startWithNewLine": false }, { "type": "text", "name": "q3" }, @@ -384,15 +383,35 @@ QUnit.test("effectiveColSpan #1", assert => { ] }); + const q1 = surveyModel.getQuestionByName("q1"); + const q2 = surveyModel.getQuestionByName("q2"); const q3 = surveyModel.getQuestionByName("q3"); const q4 = surveyModel.getQuestionByName("q4"); + const page = surveyModel.pages[0]; + assert.deepEqual(page.gridLayoutColumns.length, 2, "#0"); + assert.equal(q1.effectiveColSpan, 1, "q1 effectiveColSpan #0"); + assert.equal(q2.effectiveColSpan, 1, "q2 effectiveColSpan #0"); + assert.equal(q3.effectiveColSpan, 1, "q3 effectiveColSpan #0"); + assert.equal(q4.effectiveColSpan, 1, "q4 effectiveColSpan #0"); + + q2.colSpan = 2; + assert.deepEqual(page.gridLayoutColumns.length, 3, "#1"); + assert.equal(q1.colSpan, 1, "q1 colSpan #1"); + assert.equal(q1.effectiveColSpan, 1, "q1 effectiveColSpan #1"); + assert.equal(q2.colSpan, 2, "q2 colSpan #1"); + assert.equal(q2.effectiveColSpan, 2, "q2 effectiveColSpan #1"); assert.equal(q3.colSpan, 1, "q3 colSpan #1"); assert.equal(q3.effectiveColSpan, 1, "q3 effectiveColSpan #1"); assert.equal(q4.colSpan, 1, "q4 colSpan #1"); assert.equal(q4.effectiveColSpan, 2, "q4 effectiveColSpan #1"); - q3.effectiveColSpan = 2; + q3.colSpan = 2; + assert.deepEqual(page.gridLayoutColumns.length, 3, "#2"); + assert.equal(q1.colSpan, 1, "q1 colSpan #2"); + assert.equal(q1.effectiveColSpan, 1, "q1 effectiveColSpan #2"); + assert.equal(q2.colSpan, 2, "q2 colSpan #2"); + assert.equal(q2.effectiveColSpan, 2, "q2 effectiveColSpan #2"); assert.equal(q3.colSpan, 2, "q3 colSpan #2"); assert.equal(q3.effectiveColSpan, 2, "q3 effectiveColSpan #2"); assert.equal(q4.colSpan, 1, "q4 colSpan #2"); @@ -417,7 +436,7 @@ QUnit.test("columns effectiveWidth #1", assert => { { "type": "text", "name": "q3" }, { "type": "text", "name": "q4", "startWithNewLine": false } ], - "layoutColumns": [ + "gridLayoutColumns": [ { "width": 25 }, { "width": 30 }, { "width": 35 } @@ -428,20 +447,20 @@ QUnit.test("columns effectiveWidth #1", assert => { const page = surveyModel.pages[0]; - assert.equal(page.layoutColumns.length, 4); - assert.equal(page.layoutColumns[0].effectiveWidth, 25); - assert.equal(page.layoutColumns[1].effectiveWidth, 30); - assert.equal(page.layoutColumns[2].effectiveWidth, 35); - assert.equal(page.layoutColumns[3].effectiveWidth, 10); - assert.equal(page.layoutColumns[3].width, undefined); - - page.layoutColumns[0].effectiveWidth = 20; - assert.equal(page.layoutColumns[0].effectiveWidth, 20); - assert.equal(page.layoutColumns[0].width, 20); - assert.equal(page.layoutColumns[1].effectiveWidth, 30); - assert.equal(page.layoutColumns[2].effectiveWidth, 35); - assert.equal(page.layoutColumns[3].effectiveWidth, 15); - assert.equal(page.layoutColumns[3].width, undefined); + assert.equal(page.gridLayoutColumns.length, 4); + assert.equal(page.gridLayoutColumns[0].effectiveWidth, 25); + assert.equal(page.gridLayoutColumns[1].effectiveWidth, 30); + assert.equal(page.gridLayoutColumns[2].effectiveWidth, 35); + assert.equal(page.gridLayoutColumns[3].effectiveWidth, 10); + assert.equal(page.gridLayoutColumns[3].width, undefined); + + page.gridLayoutColumns[0].effectiveWidth = 20; + assert.equal(page.gridLayoutColumns[0].effectiveWidth, 20); + assert.equal(page.gridLayoutColumns[0].width, 20); + assert.equal(page.gridLayoutColumns[1].effectiveWidth, 30); + assert.equal(page.gridLayoutColumns[2].effectiveWidth, 35); + assert.equal(page.gridLayoutColumns[3].effectiveWidth, 15); + assert.equal(page.gridLayoutColumns[3].width, undefined); }); QUnit.test("colSpan for first row", assert => { @@ -469,7 +488,7 @@ QUnit.test("colSpan for first row", assert => { const q4 = surveyModel.getQuestionByName("q4"); const page = surveyModel.pages[0]; - assert.equal(page.layoutColumns.length, 3); + assert.equal(page.gridLayoutColumns.length, 3); assert.equal(q1.effectiveColSpan, 1, "q1 effectiveColSpan"); assert.equal(q2.effectiveColSpan, 2, "q2 effectiveColSpan"); assert.equal(q3.effectiveColSpan, 3, "q3 effectiveColSpan"); @@ -504,7 +523,7 @@ QUnit.test("expand last question in row whitch does not have colSpan set", asser const q10 = surveyModel.getQuestionByName("question10"); const page = surveyModel.pages[0]; - assert.equal(page.layoutColumns.length, 5); + assert.equal(page.gridLayoutColumns.length, 5); assert.equal(q9.effectiveColSpan, 3, "q9 effectiveColSpan"); assert.equal(q10.effectiveColSpan, 2, "q10 effectiveColSpan"); }); @@ -525,17 +544,17 @@ QUnit.test("recalculate column width after question added", assert => { const page = surveyModel.pages[0]; - assert.equal(page.layoutColumns.length, 2); - assert.equal(page.layoutColumns[0].effectiveWidth, 50); - assert.equal(page.layoutColumns[1].effectiveWidth, 50); + assert.equal(page.gridLayoutColumns.length, 2); + assert.equal(page.gridLayoutColumns[0].effectiveWidth, 50); + assert.equal(page.gridLayoutColumns[1].effectiveWidth, 50); const q3 = new QuestionTextModel("q3"); q3.startWithNewLine = false; page.addElement(q3, 2); - assert.equal(page.layoutColumns.length, 3); - assert.equal(page.layoutColumns[0].effectiveWidth, 33.33); - assert.equal(page.layoutColumns[1].effectiveWidth, 33.33); - assert.equal(page.layoutColumns[2].effectiveWidth, 33.33); + assert.equal(page.gridLayoutColumns.length, 3); + assert.equal(page.gridLayoutColumns[0].effectiveWidth, 33.33); + assert.equal(page.gridLayoutColumns[1].effectiveWidth, 33.33); + assert.equal(page.gridLayoutColumns[2].effectiveWidth, 33.33); }); QUnit.test("recalculate column width after question deleted", assert => { @@ -544,7 +563,7 @@ QUnit.test("recalculate column width after question deleted", assert => { "pages": [ { "name": "page1", - "layoutColumns": [ + "gridLayoutColumns": [ { "width": 51 }, { "width": 47 } ], @@ -557,15 +576,15 @@ QUnit.test("recalculate column width after question deleted", assert => { }); const page = surveyModel.pages[0]; - assert.equal(page.layoutColumns.length, 2); - assert.equal(page.layoutColumns[0].effectiveWidth, 51); - assert.equal(page.layoutColumns[1].effectiveWidth, 47); + assert.equal(page.gridLayoutColumns.length, 2); + assert.equal(page.gridLayoutColumns[0].effectiveWidth, 51); + assert.equal(page.gridLayoutColumns[1].effectiveWidth, 47); const q3 = surveyModel.getQuestionByName("q2"); q3.delete(); - assert.equal(page.layoutColumns.length, 1); - assert.equal(page.layoutColumns[0].effectiveWidth, 51); + assert.equal(page.gridLayoutColumns.length, 1); + assert.equal(page.gridLayoutColumns[0].effectiveWidth, 51); }); QUnit.test("question root style", function (assert) { @@ -587,7 +606,7 @@ QUnit.test("question root style", function (assert) { "flexShrink": 1, "maxWidth": "100%", "minWidth": "min(100%, 300px)" - }); + }, "#1"); const q2 = new QuestionTextModel("q2"); q2.startWithNewLine = false; @@ -595,22 +614,22 @@ QUnit.test("question root style", function (assert) { assert.deepEqual(q1.rootStyle, { "flexBasis": "50%", - "flexGrow": 0, + "flexGrow": 1, "flexShrink": 0, - "maxWidth": undefined, + "maxWidth": "100%", "minWidth": undefined - }); + }, "#2"); assert.deepEqual(q2.rootStyle, { "flexBasis": "50%", - "flexGrow": 0, + "flexGrow": 1, "flexShrink": 0, - "maxWidth": undefined, + "maxWidth": "100%", "minWidth": undefined - }); + }, "#3"); }); -QUnit.test("layoutColumns: serialize last column", assert => { +QUnit.test("gridLayoutColumns: serialize last column", assert => { const json = { gridLayoutEnabled: true, "pages": [ @@ -625,7 +644,7 @@ QUnit.test("layoutColumns: serialize last column", assert => { { "type": "text", "name": "question8", "startWithNewLine": false }, { "type": "text", "name": "question9", "startWithNewLine": false } ], - "layoutColumns": [ + "gridLayoutColumns": [ { "width": 10 } ] } @@ -634,15 +653,15 @@ QUnit.test("layoutColumns: serialize last column", assert => { const surveyModel = new SurveyModel(json); const page = surveyModel.pages[0]; - assert.deepEqual(page.layoutColumns.length, 4); - assert.deepEqual(page.layoutColumns[0].width, 10); - assert.deepEqual(page.layoutColumns[1].effectiveWidth, 30); - assert.deepEqual(page.layoutColumns[2].effectiveWidth, 30); - assert.deepEqual(page.layoutColumns[3].effectiveWidth, 30); + assert.deepEqual(page.gridLayoutColumns.length, 4); + assert.deepEqual(page.gridLayoutColumns[0].width, 10); + assert.deepEqual(page.gridLayoutColumns[1].effectiveWidth, 30); + assert.deepEqual(page.gridLayoutColumns[2].effectiveWidth, 30); + assert.deepEqual(page.gridLayoutColumns[3].effectiveWidth, 30); - page.layoutColumns[3].width = 10; + page.gridLayoutColumns[3].width = 10; const result = surveyModel.toJSON(); - assert.deepEqual(result["pages"][0]["layoutColumns"], [ + assert.deepEqual(result["pages"][0]["gridLayoutColumns"], [ { "width": 10 }, {}, {}, @@ -650,7 +669,7 @@ QUnit.test("layoutColumns: serialize last column", assert => { ]); }); -QUnit.test("layoutColumns: questions with visibleIf", assert => { +QUnit.test("gridLayoutColumns: questions with visibleIf", assert => { const json = { gridLayoutEnabled: true, "questions": [ @@ -697,7 +716,7 @@ QUnit.test("layoutColumns: questions with visibleIf", assert => { const q5 = surveyModel.getQuestionByName("q5"); const q6 = surveyModel.getQuestionByName("q6"); - assert.deepEqual(page.layoutColumns.length, 6); + assert.deepEqual(page.gridLayoutColumns.length, 6); assert.equal(q1.visible, true, "q1 visible"); assert.equal(q2.visible, true, "q2 visible"); assert.equal(q3.visible, false, "q3 visible"); @@ -727,4 +746,118 @@ QUnit.skip("Do not call survey.onPropertyValueChangedCallback on loading choices counter = 0; survey.fromJSON({ elements: [{ type: "text", name: "q1" }] }); assert.equal(counter, 0, "We shouldn't call onPropertyValueChangedCallback on loading from JSON"); +}); + +QUnit.test("gridLayoutColumns: 1 - 3 - 2 layout", assert => { + const json = { + gridLayoutEnabled: true, + "widthMode": "static", + "width": "1200px", + "elements": [ + { "type": "text", "name": "street-address" }, + + { "type": "text", "name": "city" }, + { "type": "text", "name": "zip", "startWithNewLine": false }, + { "type": "dropdown", "name": "country", "startWithNewLine": false, "choices": ["Yes", "No"], }, + + { "type": "boolean", "name": "used-as-main-residence", }, + { "type": "boolean", "name": "used-for-business", "startWithNewLine": false } + ] + }; + + const surveyModel = new SurveyModel(json); + const page = surveyModel.pages[0]; + + assert.deepEqual(page.gridLayoutColumns.length, 3); +}); + +QUnit.test("gridLayoutColumns: 2 - 2 - 3 layout", assert => { + const json = { + gridLayoutEnabled: true, + "widthMode": "static", + "width": "1200px", + "elements": [ + { + "type": "multipletext", + "name": "full-name", + "items": [ + { "name": "first-name", "title": "First name" }, + { "name": "last-name", "title": "Last name" } + ] + }, + { + "type": "multipletext", + "name": "birth-info", + "startWithNewLine": false, + "items": [ + { "name": "birthplace", "title": "Place of birth" }, + { "name": "birthdate", "inputType": "date", "title": "Date of birth" } + ] + }, + { + "type": "text", + "name": "phone", + "title": "Phone number", + "titleLocation": "top", + }, + { + "type": "text", + "name": "question1", + "startWithNewLine": false, + "title": "Street address", + "titleLocation": "top" + }, + { + "type": "text", + "name": "city1", + "title": "City/Town", + "titleLocation": "top" + }, + { + "type": "text", + "name": "zip1", + "startWithNewLine": false, + "title": "Zip Code", + "titleLocation": "top" + }, + { + "type": "dropdown", + "name": "country1", + "startWithNewLine": false, + "title": "Country", + "titleLocation": "top", + "choices": ["Yes", "No"], + } + ] + }; + + const surveyModel = new SurveyModel(json); + const page = surveyModel.pages[0]; + + assert.deepEqual(page.gridLayoutColumns.length, 3); +}); + +QUnit.test("Update gridLayoutColumns after gridLayoutEnabled changed", assert => { + const json = { + "pages": [ + { + "name": "page1", + "elements": [ + { "type": "text", "name": "question1" }, + { "type": "text", "name": "question2", "startWithNewLine": false }, + { "type": "text", "name": "question3" }, + { "type": "text", "name": "question4", "startWithNewLine": false } + ] + } + ] + }; + const surveyModel = new SurveyModel(json); + const page = surveyModel.pages[0]; + assert.deepEqual(page.gridLayoutColumns.length, 0, "#1"); + + surveyModel.gridLayoutEnabled = true; + assert.deepEqual(page.gridLayoutColumns.length, 2, "#2"); + + surveyModel.gridLayoutEnabled = false; + assert.deepEqual(page.gridLayoutColumns.length, 2, "#3"); }); \ No newline at end of file diff --git a/tests/markup/snapshots/layout-page-swnl-title-v2.snap.html b/tests/markup/snapshots/layout-page-swnl-title-v2.snap.html index d93c52373b..024f63d187 100644 --- a/tests/markup/snapshots/layout-page-swnl-title-v2.snap.html +++ b/tests/markup/snapshots/layout-page-swnl-title-v2.snap.html @@ -1,4 +1,4 @@ -
+
@@ -12,7 +12,7 @@
-
+
diff --git a/tests/markup/snapshots/layout-page-swnl-v2.snap.html b/tests/markup/snapshots/layout-page-swnl-v2.snap.html index 43c6cc0c9d..a5ae8915c4 100644 --- a/tests/markup/snapshots/layout-page-swnl-v2.snap.html +++ b/tests/markup/snapshots/layout-page-swnl-v2.snap.html @@ -1,11 +1,11 @@ -
+
-
+