Fix mat-table no flex class

After upgrading angular material, mat table had a different set of
classes which would break a view
This commit is contained in:
Sean 2021-07-27 12:29:10 +02:00
parent 6c01c2b99b
commit e8507414d9
6 changed files with 11 additions and 11 deletions

View File

@ -22,7 +22,7 @@
<span>{{ getLevelDashes(category) }}</span> <span>{{ getLevelDashes(category) }}</span>
{{ category.prefixedName }} {{ category.prefixedName }}
</h2> </h2>
<table class="os-headed-listview-table" mat-table [dataSource]="dataSources[category.id]"> <mat-table class="os-headed-listview-table" [dataSource]="dataSources[category.id]">
<!-- title column --> <!-- title column -->
<ng-container matColumnDef="title"> <ng-container matColumnDef="title">
<mat-header-cell *matHeaderCellDef> <mat-header-cell *matHeaderCellDef>
@ -67,7 +67,7 @@
<mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row> <mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row>
<mat-row *matRowDef="let row; columns: getColumnDefinition()"> </mat-row> <mat-row *matRowDef="let row; columns: getColumnDefinition()"> </mat-row>
</table> </mat-table>
</div> </div>
</mat-card> </mat-card>

View File

@ -119,7 +119,7 @@
</mat-select> </mat-select>
</div> </div>
<div class="table-container"> <div class="table-container">
<table mat-table [dataSource]="dataSource" matSort> <mat-table [dataSource]="dataSource" matSort>
<!-- Status column --> <!-- Status column -->
<ng-container matColumnDef="status" sticky> <ng-container matColumnDef="status" sticky>
<mat-header-cell *matHeaderCellDef class="first-column"></mat-header-cell> <mat-header-cell *matHeaderCellDef class="first-column"></mat-header-cell>
@ -289,6 +289,6 @@
<mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row> <mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row>
<mat-row [ngClass]="getStateClass(row)" *matRowDef="let row; columns: getColumnDefinition()"> </mat-row> <mat-row [ngClass]="getStateClass(row)" *matRowDef="let row; columns: getColumnDefinition()"> </mat-row>
</table> </mat-table>
</div> </div>
</mat-card> </mat-card>

View File

@ -111,7 +111,7 @@
</mat-select> </mat-select>
</div> </div>
<div class="table-container"> <div class="table-container">
<table mat-table [dataSource]="dataSource" matSort> <mat-table [dataSource]="dataSource" matSort>
<!-- Status column --> <!-- Status column -->
<ng-container matColumnDef="status" sticky> <ng-container matColumnDef="status" sticky>
<mat-header-cell *matHeaderCellDef class="first-column"></mat-header-cell> <mat-header-cell *matHeaderCellDef class="first-column"></mat-header-cell>
@ -168,6 +168,6 @@
</ng-container> </ng-container>
<mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row> <mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row>
<mat-row [ngClass]="getStateClass(row)" *matRowDef="let row; columns: getColumnDefinition()"> </mat-row> <mat-row [ngClass]="getStateClass(row)" *matRowDef="let row; columns: getColumnDefinition()"> </mat-row>
</table> </mat-table>
</div> </div>
</mat-card> </mat-card>

View File

@ -149,7 +149,7 @@
</mat-select> </mat-select>
</div> </div>
<div class="table-container"> <div class="table-container">
<table mat-table [dataSource]="dataSource" matSort> <mat-table [dataSource]="dataSource" matSort>
<!-- Status column --> <!-- Status column -->
<ng-container matColumnDef="status" class="first-column" sticky> <ng-container matColumnDef="status" class="first-column" sticky>
<mat-header-cell *matHeaderCellDef></mat-header-cell> <mat-header-cell *matHeaderCellDef></mat-header-cell>
@ -228,6 +228,6 @@
<mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row> <mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row>
<mat-row [ngClass]="getStateClass(row)" *matRowDef="let row; columns: getColumnDefinition()"> </mat-row> <mat-row [ngClass]="getStateClass(row)" *matRowDef="let row; columns: getColumnDefinition()"> </mat-row>
</table> </mat-table>
</div> </div>
</mat-card> </mat-card>

View File

@ -18,7 +18,7 @@
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div class="scrollable-perm-matrix"> <div class="scrollable-perm-matrix">
<table mat-table [dataSource]="getTableDataSource(app.permissions)"> <mat-table [dataSource]="getTableDataSource(app.permissions)">
<ng-container matColumnDef="perm" sticky> <ng-container matColumnDef="perm" sticky>
<mat-header-cell *matHeaderCellDef>{{ 'Permissions' | translate }}</mat-header-cell> <mat-header-cell *matHeaderCellDef>{{ 'Permissions' | translate }}</mat-header-cell>
<mat-cell *matCellDef="let perm"> <mat-cell *matCellDef="let perm">
@ -48,7 +48,7 @@
<mat-header-row *matHeaderRowDef="headerRowDef"></mat-header-row> <mat-header-row *matHeaderRowDef="headerRowDef"></mat-header-row>
<mat-row *matRowDef="let row; columns: headerRowDef"></mat-row> <mat-row *matRowDef="let row; columns: headerRowDef"></mat-row>
</table> </mat-table>
</div> </div>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </mat-accordion>

View File

@ -1,6 +1,6 @@
@import '~assets/styles/tables.scss'; @import '~assets/styles/tables.scss';
table { .mat-table {
.mat-cell { .mat-cell {
min-width: 80px; min-width: 80px;
} }