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 html : Sélectionner tout - Visualiser dans une fenêtre à part
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
Partager