#7185 - fixed simple dinamic matrix

surveyjs · Oct 27, 2023 · 1743bc7 · 1743bc7
1 parent 5a1d1d2
commit 1743bc7
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts
@@ -439,6 +439,7 @@ export var defaultV2Css = {
     row: "sd-table__row",
     expandedRow: "sd-table__row--expanded",
     rowHasPanel: "sd-table__row--has-panel",
+    rowHasEndActions: "sd-table__row--has-end-actions",
     headerCell: "sd-table__cell sd-table__cell--header",
     rowTextCell: "sd-table__cell sd-table__cell--row-text",
     columnTitleCell: "sd-table__cell--column-title",
@@ -470,6 +471,7 @@ export var defaultV2Css = {
     cell: "sd-table__cell",
     row: "sd-table__row",
     rowHasPanel: "sd-table__row--has-panel",
+    rowHasEndActions: "sd-table__row--has-end-actions",
     expandedRow: "sd-table__row--expanded",
     itemCell: "sd-table__cell--item",
     headerCell: "sd-table__cell sd-table__cell--header",

diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss
@@ -463,7 +463,7 @@
  }
 
   .sd-table:not(.sd-matrix__table) {
-    tr:not(.sd-table__row--has-panel){
+    tr:not(.sd-table__row--has-end-actions){
       &:not(:last-of-type) {
         padding-bottom: calcSize(3);
         &::after {
@@ -488,8 +488,10 @@
     }
   }
 
-  .sd-table-wrapper:last-of-type .sd-table__row:last-of-type .sd-table__cell-action--show-detail-mobile {
-    margin-bottom: calcSize(-2);
+  .sd-table-wrapper:last-of-type .sd-table__row:last-of-type  {
+    .sd-table__cell-action--show-detail-mobile, .sd-table__cell-action--remove-row {
+      margin-bottom: calcSize(-2);
+    }
   }
 
   .sd-matrix__label {
@@ -550,9 +552,11 @@
     .sd-action-bar {
       margin-right: calcSize(-3);
       margin-left: calcSize(-3);
-        justify-content: space-between;
       background: $background;
     }
+    #show-detail-mobile {
+      flex-grow: 1;
+    }
   }
 
   .sd-action.sd-action.sd-matrixdynamic__remove-btn {
@@ -578,7 +582,7 @@
   }
   .sd-table__row {
     padding-bottom: calcSize(2);
-    &.sd-table__row--has-panel {
+    &.sd-table__row--has-end-actions {
       padding-bottom: calcSize(0);
     }
 

diff --git a/src/question_matrixdropdownrendered.ts b/src/question_matrixdropdownrendered.ts
@@ -141,7 +141,7 @@ export class QuestionMatrixDropdownRenderedRow extends Base {
   @property({ defaultValue: false }) isGhostRow: boolean;
   @property({ defaultValue: false }) isAdditionalClasses: boolean;
   @property({ defaultValue: true }) visible: boolean;
-  //@property({ defaultValue: true }) visible: boolean;
+  public hasEndActions: boolean;
   public row: MatrixDropdownRowModelBase;
   public isErrorsRow = false;
   private static counter = 1;
@@ -165,6 +165,7 @@ export class QuestionMatrixDropdownRenderedRow extends Base {
       .append(this.cssClasses.detailRow, this.isDetailRow)
       .append(this.cssClasses.rowHasPanel, this.row?.hasPanel)
       .append(this.cssClasses.expandedRow, this.row?.isDetailPanelShowing && !this.isDetailRow)
+      .append(this.cssClasses.rowHasEndActions, this.hasEndActions)
       .append(this.cssClasses.ghostRow, this.isGhostRow)
       .append(this.cssClasses.rowAdditional, this.isAdditionalClasses)
       .toString();
@@ -750,6 +751,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
       const actions = this.getRowActionsCell(rowIndex, location, renderedRow.isDetailRow);
       if (!!actions) {
         renderedRow.cells.push(actions);
+        renderedRow.hasEndActions = true;
       } else {
         var cell = new QuestionMatrixDropdownRenderedCell();
         cell.isEmpty = true;

diff --git a/visualRegressionTests/tests/defaultV2/etalons/responsiveness-matrixdynamic.png b/visualRegressionTests/tests/defaultV2/etalons/responsiveness-matrixdynamic.png