Angular: Why is my scrollbar not showing up, when I set it to "flex"

Patrice 0
Viewed 32

I could need some help regarding this issue: When I set my scrollHeight of the p-table to flex it won't show up anymore. If I set it for example to 400px it will displayed as expected. The structure of my HTML is the following:

<mat-drawer-container>
 <mat-drawer-content [style]="'overflow: hidden'">
  <mat-card [style]="'overflow: hidden'">
   <mat-card-content [style]="'overflow: auto'">
    <p-table [value]="dataSource.data" [scrollable]='true' scrollHeight="flex">
     ...
    </p-table>
   </mat-card-content>
  </mat-card>
 </mat-drawer-content>
</mat-drawer-container>
scrollbar scroll css angular html
1 Answers

Try this:

<table mat-table[dataSource]="someSource" multiTemplateDataRows>
     <ng-container matColumnDef="header">
          <th mat-header-cell *matHeaderCellDef>Header</th>
          <td mat-cell *matCellDef="let element">{{element.name}}</td>
     </ng-container> 


    <ng-container matColumnDef="expandedDetail">
        <td mat-cell *matCellDef="let element"[attr.colspan]="columnsToDisplay.length">
         <div class="example-element-detail" [@detailExpand]="element === expandedElement ? 'expanded' : 'collapsed'">
              <div class="example-element-description">
                   some text ...
           </div>
        </div>
      </td>
   </ng-container>

CSS:

table {
 width: 100%;
}

tr.example-element-row {
 cursor: pointer;
}

tr.example-detail-row {
 height: 0;
}

.example-element-row td {
 border-bottom-width: 0;
}

.example-element-detail {
 overflow: hidden;
 display: flex;
}

.example-element-description {
 padding: 16px;
 width: 100%;
}

.example-element-description-attribution {
 opacity: 0.5;
}
userzzPG0
Related