diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss index 0ce9e32114..cd2a0d35d7 100644 --- a/src/defaultV2-theme/blocks/sd-table.scss +++ b/src/defaultV2-theme/blocks/sd-table.scss @@ -110,6 +110,7 @@ .sd-table__row:first-of-type>.sd-table__cell { border-top: calcSize(1) solid transparent; } + .sd-table__row:last-of-type>.sd-table__cell { border-bottom: calcSize(1) solid transparent; } @@ -331,6 +332,7 @@ .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 { position: sticky; @@ -513,18 +515,28 @@ padding-bottom: calcSize(0); } - tr:not(.sd-table__row--expanded) { - &::after { - z-index: 12; - content: " "; - display: block; - position: relative; - height: 1px; - background-color: $border-light; - left: calcSize(-2); - bottom: calcSize(0); - width: calc(100% + 4 * #{$base-unit}); - z-index: 12; + tfoot tr::before, + tr:not(.sd-table__row--expanded)::after { + z-index: 12; + content: " "; + display: block; + position: relative; + height: 1px; + background-color: $border-light; + left: calcSize(-2); + width: calc(100% + 4 * #{$base-unit}); + z-index: 12; + } + + tr:not(.sd-table__row--expanded)::after { + bottom: 0; + } + + tfoot tr { + padding-top: calcSize(5); + + &::before { + top: calcSize(-2); } } } @@ -592,6 +604,7 @@ .sd-matrix__cell, .sd-table__cell--actions, .sd-table__cell--row-text, + .sd-table__cell--footer-total, .sd-table__cell--error { &::before { content: none; @@ -643,6 +656,7 @@ margin-bottom: calcSize(-2); } + .sd-table__cell--footer-total:not(.sd-matrix__cell), .sd-table__cell--row-text:not(.sd-matrix__cell) { color: $foreground-light; } diff --git a/visualRegressionTests/tests/defaultV2/etalons/responsiveness-matrixdropdown-totals.png b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-matrixdropdown-totals.png new file mode 100644 index 0000000000..32ce47a16a Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-matrixdropdown-totals.png differ diff --git a/visualRegressionTests/tests/defaultV2/responsiveness.ts b/visualRegressionTests/tests/defaultV2/responsiveness.ts index a0426e25a3..07e67911be 100644 --- a/visualRegressionTests/tests/defaultV2/responsiveness.ts +++ b/visualRegressionTests/tests/defaultV2/responsiveness.ts @@ -734,4 +734,52 @@ frameworks.forEach(framework => { await takeElementScreenshot("responsiveness-matrixdropdown-text-fields.png", Selector(".sd-question"), t, comparer); }); }); + + test("check matrixdropdown with totals in mobile mode", async (t) => { + await wrapVisualTest(t, async (t, comparer) => { + await t.resizeWindow(600, 1920); + await initSurvey(framework, + { + "pages": [ + { + "name": "page1", + "elements": [ + { + "type": "matrixdropdown", + "name": "question1", + "columns": [ + { + "name": "Column 1", + "totalType": "sum" + }, + { + "name": "Column 2", + "totalType": "count" + }, + { + "name": "Column 3", + "totalType": "max" + } + ], + "choices": [ + 1, + 2, + 3, + 4, + 5 + ], + "rows": [ + "Row 1", + "Row 2" + ], + "totalText": "Total:" + } + ] + } + ] + } + ); + await takeElementScreenshot("responsiveness-matrixdropdown-totals.png", Selector(".sd-question"), t, comparer); + }); + }); }); \ No newline at end of file