title: Angular Material Expanding Tables
body: <p>I have an application which requires the use of an expanding table, in order to show a greater detail than that within the columns. I have the table already working and have been following the example here <a href="https://stackblitz.com/angular/gdbrmljnogk?file=src%2Fapp%2Ftable-expandable-rows-example.html" rel="nofollow noreferrer">https://stackblitz.com/angular/gdbrmljnogk?file=src%2Fapp%2Ftable-expandable-rows-example.html</a>.</p>
  
  <p>Now, I can get the expanded row to show and hide on subsequent clicks, however, my problem is that the expanded row is appearing on top of the table row, as opposed to being underneath and pushing the other rows down. I can see the CSS elements being added with the trigger being fired and removed when its fired again or on another row, but still something within my CSS isn't showing the expanded row correctly.</p>
  
  <p>I would put everything up on stackblitz, but it is very integrated with the application and difficult to get working in the same way as a standalone item. The problem I'm getting is shown below.</p>
  
  <p><a href="https://i.stack.imgur.com/DHouU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DHouU.png" alt="enter image description here"></a></p>
  
  <p>Here is the HTML for the section in question.</p>
  
  <pre><code>    &lt;div fxFlex.gt-sm="100%" fxFlex="100"&gt;
      &lt;mat-card&gt;
          &lt;mat-card-header&gt;
              &lt;mat-card-title&gt;
                  Incomplete Change Requests.
              &lt;/mat-card-title&gt;
              &lt;mat-card-subtitle&gt;
                  These are change requests which have been authorised and need to be marked as completed.
              &lt;/mat-card-subtitle&gt;
          &lt;/mat-card-header&gt;
          &lt;mat-card-content&gt;
              &lt;div class="mat-elevation-z8"&gt;
  
                  &lt;div class="loading-shade" *ngIf="isLoadingResults"&gt;
                      &lt;mat-spinner *ngIf="isLoadingResults"&gt;&lt;/mat-spinner&gt;
                  &lt;/div&gt;
  
                  &lt;div class="table-container"&gt;
  
                      &lt;mat-table [dataSource]="data" matSort class="table" #Table #TableSort="matSort" multiTemplateDataRows&gt;
  
                          &lt;ng-container matColumnDef="jobNumber" sticky&gt;
                              &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Job #&lt;/mat-header-cell&gt;
                              &lt;mat-cell *matCellDef="let incomplete" (click)="changeDetails($event, row)"&gt;
                                  &lt;span style="text-decoration: underline; cursor:pointer;"&gt;{{ incomplete.jobNum}}&lt;/span&gt;
                              &lt;/mat-cell&gt;
                          &lt;/ng-container&gt;
  
                          &lt;ng-container matColumnDef="createdAt"&gt;
                              &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Created Date Time&lt;/mat-header-cell&gt;
                              &lt;mat-cell *matCellDef="let incomplete"&gt;{{ incomplete.createdDateTime}}&lt;/mat-cell&gt;
                          &lt;/ng-container&gt;
  
                          &lt;ng-container matColumnDef="createdBy"&gt;
                              &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Created By&lt;/mat-header-cell&gt;
                              &lt;mat-cell *matCellDef="let incomplete"&gt;{{ incomplete.createdByEmail}}&lt;/mat-cell&gt;
                          &lt;/ng-container&gt;
  
                          &lt;ng-container matColumnDef="changes"&gt;
                              &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Changes&lt;/mat-header-cell&gt;
                              &lt;mat-cell *matCellDef="let incomplete"&gt;{{ incomplete.changes}}&lt;/mat-cell&gt;
                          &lt;/ng-container&gt;
  
                          &lt;ng-container matColumnDef="authorisedAt"&gt;
                              &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Authorised Date Time&lt;/mat-header-cell&gt;
                              &lt;mat-cell *matCellDef="let incomplete"&gt;{{ incomplete.authorisedDateTime}}&lt;/mat-cell&gt;
                          &lt;/ng-container&gt;
  
                          &lt;ng-container matColumnDef="authorisedBy"&gt;
                              &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt;Authorised By&lt;/mat-header-cell&gt;
                              &lt;mat-cell *matCellDef="let incomplete"&gt;{{ incomplete.authorisedByEmail}}&lt;/mat-cell&gt;
                          &lt;/ng-container&gt;
  
                          &lt;!-- Expanded Content Column. --&gt;
                          &lt;ng-container matColumnDef="expandedDetail"&gt;
                              &lt;mat-cell *matCellDef="let element" [attr.colspan]="6"&gt;
                                  &lt;div class="element-detail"
                                      [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'"&gt;
                                      &lt;div style="border: 1px solid red;"&gt;
                                          This is a test
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/mat-cell&gt;
                          &lt;/ng-container&gt;
  
                          &lt;!-- Main row definition. --&gt;
                          &lt;mat-row *matRowDef="let element; columns: displayedColumns;"
                                   class="element-row"
                                   [class.expanded-row]="expandedElement === element"
                                   (click)="expandedElement = (expandedElement === element) ? null : element"&gt;
                          &lt;/mat-row&gt;
  
                          &lt;!-- Expanded row definition. --&gt;
                          &lt;mat-row *matRowDef="let element; columns: ['expandedDetail']" class="detail-row"&gt;&lt;/mat-row&gt;
  
                          &lt;!-- Header row definition. --&gt;
                          &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
  
                      &lt;/mat-table&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/mat-card-content&gt;
      &lt;/mat-card&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS being applied (in addition to the material elements).</p>
  
  <pre><code>.detail-row {
      height: 0px;
      min-height: 0px;
  }
  
  .element-row {
      border-bottom-width: 0;
  }
  
  .element-detail {
      overflow: hidden;
      display: flex;
      height: 30px;
  }
  
  md-row:nth-child(even) {
        background-color:#EDF1F5;
  }
  
  mat-row:nth-child(odd) {
        background-color:#FDFDFB;
  }
  
  .loading-shade {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 56px;
      right: 0;
      background: rgba(0, 0, 0, 0.15);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  /*
  .container {
      position: relative;
      min-height: 200px;
  }
  
  .table-container {
      min-height: 100px;
      position: relative;
      overflow: auto;
  }
  */
  
  .table {
        width: 100%;
  }
  
  mat-header-cell {
      display:flex;
      justify-content: center;
  }
  
  .mat-cell {
      display:flex;
      justify-content: center;
  }
  
  .mat-column-jobNumber {
      flex: 0 0 80px !important;
  }
  
  .mat-column-authorisedBy, .mat-column-createdBy, .mat-column-completedBy {
      word-wrap: break-word !important;
      white-space: unset !important;
      overflow-wrap: break-word;
      word-wrap: break-word;
      word-break: break-word;
      -ms-hyphens: auto;
      -moz-hyphens: auto;
      -webkit-hyphens: auto;
      hyphens: auto;
  }
  </code></pre>
  
  <p>It is running on Angular 6 as this moment in time.</p>
  
  <p>Any help or pointers on this matter would be greatly appreciated.</p>