diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss index abc6d30155..ffa0ba83b5 100644 --- a/src/defaultV2-theme/blocks/sd-table.scss +++ b/src/defaultV2-theme/blocks/sd-table.scss @@ -40,6 +40,7 @@ .sd-table--no-header { padding-top: calcSize(3); } + .sd-panel:not(.sd-panel--as-page) { &>.sd-panel__content { .sd-table--no-header { @@ -444,7 +445,7 @@ .sd-table { tr { display: flex; - flex-direction: column; + flex-direction: column; } } @@ -453,32 +454,38 @@ padding-top: calcSize(1); } } - .sd-table__row { + + .sd-table__row { padding-top: calcSize(2); - } - .sd-table__row--expanded { - .sd-table__cell-action--show-detail-mobile { - display: none; - } - } + } + + .sd-table__row--expanded { + .sd-table__cell-action--show-detail-mobile { + display: none; + } + } .sd-table:not(.sd-matrix__table) { .sd-table__row { padding-bottom: calcSize(2); + &.sd-table__row--has-end-actions { padding-bottom: calcSize(0); } } - - tr:not(.sd-table__row--has-end-actions){ + + tr:not(.sd-table__row--has-end-actions) { &:not(:last-of-type) { padding-bottom: calcSize(3); + &::after { bottom: calcSize(-3); } } + padding-bottom: calcSize(0); } + tr:not(.sd-table__row--expanded) { &::after { z-index: 12; @@ -495,8 +502,10 @@ } } - .sd-table:not(.sd-table--has-footer) .sd-table__row:last-of-type { - .sd-table__cell-action--show-detail-mobile, .sd-table__cell-action--remove-row { + .sd-table:not(.sd-table--has-footer) .sd-table__row:last-of-type { + + .sd-table__cell-action--show-detail-mobile, + .sd-table__cell-action--remove-row { margin-bottom: calcSize(-2); } } @@ -507,7 +516,7 @@ .sd-table__cell { border-top: none; - border-bottom: none; + border-bottom: none; display: block; padding-top: 0; padding-bottom: 0; @@ -520,13 +529,14 @@ .sd-table__cell--error { margin-top: calcSize(0); + &.sd-table__cell--error-bottom { .sd-question__erbox { margin-top: calcSize(1); } } } - + .sd-table__cell:first-of-type, .sd-matrix__cell { margin-top: 0; @@ -542,6 +552,16 @@ } } + .sd-table--no-header { + padding-top: 0; + + .sd-table__cell { + &::before { + content: none; + } + } + } + .sd-matrix__cell, .sd-table__cell--actions, .sd-table__cell--row-text, @@ -550,26 +570,29 @@ content: none; } } + .sd-table__cell--detail-panel { padding-top: 0; padding-bottom: 0; border-top: 0; border-bottom: 0; - .sd-panel__content { + .sd-panel__content { padding-top: 0; } } + .sd-table__cell.sd-table__cell--actions { width: auto; margin-top: calcSize(1); - margin-bottom: calcSize(1); + margin-bottom: calcSize(1); .sd-action-bar { margin-right: calcSize(-3); margin-left: calcSize(-3); background: $background; } + #show-detail-mobile { flex-grow: 1; } diff --git a/visualRegressionTests/tests/defaultV2/etalons/responsiveness-matrixdropdown-without-header.png b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-matrixdropdown-without-header.png new file mode 100644 index 0000000000..c03a0da6fe Binary files /dev/null and b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-matrixdropdown-without-header.png differ diff --git a/visualRegressionTests/tests/defaultV2/matrix.ts b/visualRegressionTests/tests/defaultV2/matrix.ts index a35d95b8ca..b140d3e17b 100644 --- a/visualRegressionTests/tests/defaultV2/matrix.ts +++ b/visualRegressionTests/tests/defaultV2/matrix.ts @@ -1198,4 +1198,54 @@ frameworks.forEach(framework => { await takeElementScreenshot("question-matrix--single-page.png", pageElement, t, comparer); }); }); + test("Check mobile multi select matrix with showHeader: false", async (t) => { + await t.resizeWindow(600, 1080); + await wrapVisualTest(t, async (t, comparer) => { + await initSurvey(framework, { + elements: [ + { + "type": "matrixdropdown", + "name": "q1", + "title": "Question", + "showHeader": false, + "cellType": "text", + "columns": [ + { + "name": "Column 1", + "title": "Title" + }, + { + "name": "Column 2", + "title": "Title" + }, + { + "name": "Column 3", + "title": "Title" + }, + { + "name": "Column 4", + "title": "Title" + }, + { + "name": "Column 5", + "title": "Title" + } + ], + "rows": [ + { + "value": "Row 1", + "text": "Title" + }, + { + "value": "Row 2", + "text": "Title" + }, + ] + } + ] + }); + await takeElementScreenshot("responsiveness-matrixdropdown-without-header.png", Selector(".sd-question"), t, comparer); + }); + }); }); +