diff --git a/src/panel.ts b/src/panel.ts index e06077f253..d6e21154c4 100644 --- a/src/panel.ts +++ b/src/panel.ts @@ -1758,17 +1758,8 @@ export class PanelModel extends PanelModelBase implements IElement { } private footerToolbarValue: ActionContainer; - private footerToolbarCssValue: string; - - public set footerToolbarCss(val: string) { - this.footerToolbarCssValue = val; - } - - public get footerToolbarCss(): string { - return this.footerToolbarCssValue || this.cssClasses.panel?.footer; - } public onGetFooterActionsCallback: () => Array; - + public onGetFooterToolbarCssCallback: () => string; public getFooterToolbar(): ActionContainer { if (!this.footerToolbarValue) { var actions = this.footerActions; @@ -1786,9 +1777,13 @@ export class PanelModel extends PanelModelBase implements IElement { actions = this.survey?.getUpdatedPanelFooterActions(this, actions); } this.footerToolbarValue = this.createActionContainer(this.allowAdaptiveActions); - // if (!!this.cssClasses.panel) { - this.footerToolbarValue.containerCss = this.footerToolbarCss; - // } + let footerCss = this.onGetFooterToolbarCssCallback ? this.onGetFooterToolbarCssCallback() : ""; + if(!footerCss) { + footerCss = this.cssClasses.panel?.footer; + } + if(footerCss) { + this.footerToolbarValue.containerCss = footerCss; + } this.footerToolbarValue.setItems(actions); } return this.footerToolbarValue; diff --git a/src/question_paneldynamic.ts b/src/question_paneldynamic.ts index 643218a248..1a8bec56fb 100644 --- a/src/question_paneldynamic.ts +++ b/src/question_paneldynamic.ts @@ -1769,7 +1769,7 @@ export class QuestionPanelDynamicModel extends Question panel.onGetFooterActionsCallback = () => { return this.getPanelActions(panel); }; - panel.footerToolbarCss = this.cssClasses.panelFooter; + panel.onGetFooterToolbarCssCallback = () => { return this.cssClasses.panelFooter; }; panel.registerPropertyChangedHandlers(["visible"], () => { if(panel.visible) this.onPanelAdded(panel); else this.onPanelRemoved(panel); diff --git a/tests/question_paneldynamic_tests.ts b/tests/question_paneldynamic_tests.ts index 4e65a82633..4033b3abbb 100644 --- a/tests/question_paneldynamic_tests.ts +++ b/tests/question_paneldynamic_tests.ts @@ -17,6 +17,7 @@ import { ItemValue } from "../src/itemvalue"; import { StylesManager } from "../src/stylesmanager"; import { settings } from "../src/settings"; import { QuestionMatrixModel } from "../src/question_matrix"; +import { defaultStandardCss } from "../src/defaultCss/cssstandard"; export default QUnit.module("Survey_QuestionPanelDynamic"); @@ -6186,4 +6187,33 @@ QUnit.test("nested panel.panelCount&expression question", function (assert) { assert.equal(panel.getQuestionByName("C").value, 1, "C"); assert.equal(panel.getQuestionByName("D").value, 3, "D"); assert.equal(panel.getQuestionByName("E").value, 3, "E"); +}); +QUnit.test("Footer css for nested panels", function(assert) { + const footerCss = "abcd"; + defaultStandardCss.paneldynamic["panelFooter"] = footerCss; + const survey = new SurveyModel({ + questions: [ + { + type: "paneldynamic", + name: "q", + panelCount: 1, + templateElements: [ + { type: "text", name: "q1" }, + { + type: "paneldynamic", + name: "qq", + panelCount: 1, + templateElements: [{ type: "text", name: "q2" }], + }, + ], + }, + ], + }); + const question = survey.getQuestionByName("q"); + assert.equal(question.panels[0].getFooterToolbar().containerCss, footerCss, "root footer container css"); + const nested = question.panels[0].getQuestionByName("qq"); + assert.equal(nested.panels[0].getFooterToolbar().containerCss, footerCss, "nested footer container css on loading"); + nested.addPanel(); + assert.equal(nested.panels[1].getFooterToolbar().containerCss, footerCss, "nested footer container css on creating"); + delete defaultStandardCss.paneldynamic["panelFooter"]; }); \ No newline at end of file