I want to adjust the height of the lines of an angular6 mat-table to the content (as you can see in the attached graphic).
Intention of the whole thing: I want to have the first DialectLanguage in the cell first, followed by 1-* corresponding ids. Then in the same cell I want to list all other DialectLanguages and their Ids and so on...
<div class="mat-elevation-z8">
<mat-table [dataSource]="listData" matSort>
<ng-container matColumnDef="germanEntry">
<mat-header-cell *matHeaderCellDef mat-sort-header>German</mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.germanEntry }} </mat-cell>
</ng-container>
<ng-container matColumnDef="germanId">
<mat-header-cell *matHeaderCellDef mat-sort-header>German ID</mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.germanId }} </mat-cell>
</ng-container>
<ng-container matColumnDef="references">
<mat-header-cell *matHeaderCellDef mat-sort-header>References to other Languages</mat-header-cell>
<mat-cell *matCellDef="let element">
<span *ngFor="
let item of element.reverseTranslations;
let i = index;
let isLast = last
">
{{ item.reverseGerman2DialectLanguage }} <br >
<span style="display:block;" *ngFor="let innerItem of item.reverseGerman2DialectIdList" let j="index;" let
isInnerLast="last">
{{ innerItem }}
<!-- Comma and space will be appended to all entries except the last one : -->
<span *ngIf="!isInnerLast">, </span>
</span>
</span></mat-cell>
</ng-container>
//
</mat-table>
</div>
At the moment new entries of the corresponding cells are moved to the right when the cell is full.
What can I do as a newbie in CSS to solve this problem?
you may wrap inner item to another span and add style display:block; code.
<span style="display:block;" *ngFor="let innerItem of item.reverseGerman2DialectIdList" let j="index;" let isInnerLast="last">
{{ innerItem }}
<!-- Comma and space will be appended to all entries except the last one : -->
<span *ngIf="!isInnerLast">, </span>
</span>
I created a sample here to help you more.
http://plnkr.co/edit/ZOi00Rpa5Vl7GmrjvkN3?p=preview
Hope it helps you!
Cheers!
As somebody may have the same problem in the future, I am going to post my final solution. Thanks to @itsmeniel, who helped me to the right direction!
References to other Languages {{ item.reverseGerman2DialectLanguage }}:
<span style="display:block;" *ngFor="let innerItem of item.reverseGerman2DialectIdList; last as isInnerLast">
{{innerItem}}
<!-- Comma and space will be appended to all entries except the last one : -->
<span *ngIf="!isInnerLast">, </span>
</span>
</span>
</mat-cell>
</ng-container>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.