Fonction css calc ne fonctione pas pour le tag TH d'une table dans le cadre de Material Angular
Bonjour, j'essaye d'utiliser la fonction css calc pour spécifier la largeur de la colonne th dans l'utilisation des tables Angular Material
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <table mat-table [dataSource]="dataSourceAppEnvRoleUsers" multiTemplateDataRows >
<!-- Application Column -->
<ng-container matColumnDef="role">
<th style="width: calc(25% - 15px);" mat-header-cell *matHeaderCellDef> Role </th>
<td mat-cell style="text-align: left !important;" *matCellDef="let element" [style.vertical-align]="element.users && element.users.length > 1 ? 'text-top' : 'middle'"><div title="{{element.name}}">{{element.name && element.name.length > 15 ? element.name.substring(0, 15) + '...' : element.name}}</div></td>
</ng-container>
<!-- Environment Column -->
<ng-container matColumnDef="description">
<th style="width: calc(50% - 30px);" mat-header-cell *matHeaderCellDef> Description </th>
<td mat-cell *matCellDef="let element" [style.vertical-align]="element.users && element.users.length > 1 ? 'text-top' : 'middle'">
<ng-template #tipContent8>{{element.description}}</ng-template>
<span title="{{element.description}}">{{element.description && element.description.length > 20 ? element.description.substring(0,20) + '...' : element.description ? element.description : ''}}</span>
</td>
</ng-container>
<!-- Users Column -->
<ng-container matColumnDef="users">
<th style="width: calc(25% - 15px);" mat-header-cell *matHeaderCellDef> Users </th>
<td mat-cell *matCellDef="let element"><ul style="margin: 0 0 0 15px !important; padding: 0 !important; text-align: left !important;"><li *ngFor="let user of element.users | userPipe:includeRejectedRemoved"><a style="cursor: pointer" title="Status: {{user.status}}" [style.color]="user.status === STATUS.DONE ? '#007bff' : user.status === STATUS.WITHDRAW ? 'red' : user.status === STATUS.NEW ? '#E4A598' : user.status === STATUS.VALIDATED ? 'green' : 'grey'" href="javascript:void(0)" (click)="displayUser(element, user)">{{user.firstName}} {{user.lastName}}</a></li></ul></td>
</ng-container>
<!-- Actions Column -->
<ng-container matColumnDef="actions">
<th style="width: 60px;" mat-header-cell *matHeaderCellDef> Action</th>
<td mat-cell *matCellDef="let element">
<ng-template #tipContent4><div>Add User</div></ng-template>
<span [ngbTooltip]="tipContent4"><mat-icon (click)="addUser(element);" style="cursor: pointer;">person_add</mat-icon></span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsAppEnvRoleUsers"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsAppEnvRoleUsers;"
class="example-element-row"></tr>
</table> |
Quand j'utilise juste des pourcentage ça marche mais pas la fonction calc. Pourquoi
