diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss index a6f8e02649..a04eb2552c 100644 --- a/src/defaultV2-theme/blocks/sd-table.scss +++ b/src/defaultV2-theme/blocks/sd-table.scss @@ -412,6 +412,34 @@ } } +//compact styles +.sd-element--with-frame.sd-element--compact { + .sd-table { + background-color: $background-dim; + } + .sd-table-wrapper { + + &:before, + &:after { + background-color: $background-dim; + } + } + + .sd-table__cell--actions:not(.sd-table__cell--vertical):last-child { + .sd-action-bar { + background-color: $background-dim; + } + } + + .sd-table__cell--actions:not(.sd-table__cell--vertical), + .sd-table__cell--empty, + .sd-table__cell--row-text, + .sd-table__cell--footer-total, + .sd-matrix__cell:first-of-type, + .sd-matrix tr>td:first-of-type { + background-color: $background-dim; + } +} .sd-question--table { &>.sd-question__header, diff --git a/visualRegressionTests/tests/defaultV2/etalons/question-matrix-dropdown-columns-theme.png b/visualRegressionTests/tests/defaultV2/etalons/question-matrix-dropdown-columns-theme.png new file mode 100644 index 0000000000..5f364a3c89 Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/question-matrix-dropdown-columns-theme.png differ diff --git a/visualRegressionTests/tests/defaultV2/themes.ts b/visualRegressionTests/tests/defaultV2/themes.ts index 5c2741324f..ad902fc066 100644 --- a/visualRegressionTests/tests/defaultV2/themes.ts +++ b/visualRegressionTests/tests/defaultV2/themes.ts @@ -509,4 +509,79 @@ frameworks.forEach(framework => { await takeElementScreenshot("survey-html-theme.png", Selector(".sd-page"), t, comparer); }); }); + + test("Matrix many columns", async (t) => { + await wrapVisualTest(t, async (t, comparer) => { + await t.resizeWindow(800, 600); + await initSurvey(framework, { + "logoPosition": "right", + "focusFirstQuestionAutomatic": false, + "pages": [ + { + "name": "page1", + "elements": [ + { + "type": "matrixdynamic", + "name": "matrix", + "columns": [ + { + "name": "col1" + }, + { + "name": "col2" + }, + { + "name": "col3" + }, + { + "name": "col5" + }, + { + "name": "col6" + }, + { + "name": "col6" + }, + { + "name": "col7" + }, + { + "name": "col8" + }, + { + "name": "col9" + }, + { + "name": "col10" + }, + { + "name": "col11" + }, + { + "name": "col12" + } + ], + "rows": [ + "item1", + "item2" + ] + } + ] + } + ] + }); + //await t.click(Selector("body"), { offsetX: 5, offsetY: 5 }); + await ClientFunction(() => { + (window).survey.isCompact = true; + (window).survey.applyTheme({ + "cssVariables": { + "--sjs-general-backcolor-dim": "blue" + } + }); + })(); + const questionRoot = Selector(".sd-body"); + await takeElementScreenshot("question-matrix-dropdown-columns-theme.png", questionRoot, t, comparer); + }); + }); + }); \ No newline at end of file