Hello,
I got a problem with PDF generation with Kendo,
Marked columns in red should be staggered on the right side, this data belongs to Homolog Number PH.002.15-O. Because of the break-page marked lines are misaligned
I provide you the html code
<div *ngIf="homologations$ | async as homologations">
<kendo-pdf-export #pdf
paperSize="A4"
[keepTogether]="'td'"
[margin]="{
top: '2cm',
bottom: standard.homologationForm.fields.length > 1 ? '2.5cm' : '4cm',
right: '2cm',
left: '2cm'
}"
[repeatHeaders]="true"
[landscape]="standard.homologationForm.fields.length > 1"
class="prevent-split"
>
<ng-template kendoPDFTemplate let-pageNum="pageNum" let-totalPages="totalPages">
<div class="top-template">
<div class="header">
<span>FIA</span>
<span>List n°{{ standard.technicalList.number }}</span>
</div>
</div>
<div class="bot-template">
<span>
<sup>(1)</sup> The homologation end date represents the final date on which the products may be manufactured
</span>
<span>
<sup>(2)</sup> The validity of the product must always be that which is indicated on the product homologation label.
The dates in this column are the latest possible dates that can be shown on the homologation label
</span>
<span *ngIf="warnings.length > 0">
<sup>(3)</sup> Please refer to the end of this section
</span>
<div class="page-div">
<span>{{ currentDate | appTechnicalDate:'dd.MM.YYYY' }}</span>
<span>Page {{ pageNum }} / {{ totalPages }}</span>
</div>
</div>
</ng-template>
<div class="title-div">
{{ standard.technicalList.englishTitle }}
</div>
<div class="center technical-div">
TECHNICAL LIST N° {{ standard.technicalList.number }}
</div>
<div class="center">
<img *ngIf="headerPicture" [src]="headerPicture" class="header-picture" [style.max-height]="standard.homologationForm.fields.length > 1 ? '300px' : '400px'" />
</div>
<div [innerHtml]="standard.technicalList.linkUrl | appSafeHtml"></div>
<ng-container *ngFor="let part of standard.parts; let i = index">
<div *ngIf="part.name !== ''" class="part-infos" [class.page-break]="i > 0">
<div class="center technical-div">
{{ part.name }}
</div>
<div *ngIf="part.description !== null">
{{ part.description }}
</div>
</div>
<table class="table-contents">
<thead>
<th style="width: 50px;">
Homol. number
</th>
<th>
Brand
</th>
<th>
Model
</th>
<th *ngFor="let field of standard.homologationForm.fields">
{{ field.name }}
</th>
<th style="width: 35px;">
Start of homol.
</th>
<th style="width: 35px;">
End of homol.<sup>(1)</sup>
</th>
<th style="width: 55px;" *ngIf="standard.technicalList.validity">
Product valid until<sup>(2)</sup>
</th>
</thead>
<tbody>
<ng-container *ngFor="let homologation of getHomologationsPart(homologations, part)">
<tr [ngClass]="{
'row-withdraw': (homologation.withdrawType !== null && homologation.withdrawType.code === withdrawTypesEnum.TotalWithdraw),
'row-partial-withdraw': (homologation.withdrawType !== null && homologation.withdrawType.code === withdrawTypesEnum.PartialWithdraw)
}"
>
<td style="width: 50px;"
[rowSpan]="homologation.helmetRequests.length + homologation.extensionRequests.length + 1"
>
{{ homologation.homologationNumber }}
<sup *ngIf="homologation.withdrawType !== null">(3)</sup>
</td>
<td [rowSpan]="
homologation.helmetRequests.length +
homologation.extensionRequests.length + 1
">{{ homologation.brand }}</td>
<td [rowSpan]="
homologation.helmetRequests.length +
homologation.extensionRequests.length + 1
">
<span>{{ homologation.initialRequest.modelName }}</span>
<span *ngFor="let request of homologation.changeOfNameRequests">
<br />
{{ request.modelName }}
</span>
</td>
<td *ngFor="let field of standard.homologationForm.fields">
{{ getCustomFieldValue(homologation.customFields, field.name) }}
</td>
<td style="width: 35px;">
{{ homologation.startDate | appTechnicalDate }}
</td>
<td style="width: 35px;"
[rowSpan]="homologation.extensionRequests.length + 1"
>
{{ homologation.endDate | appTechnicalDate }}
</td>
<td style="width: 55px;"
*ngIf="standard.technicalList.validity && standard.technicalList.validityDuration"
[rowSpan]="homologation.extensionRequests.length + 1"
>{{ homologation.endDate.getFullYear() + standard.technicalList.validityDuration }}</td>
</tr>
<!--tr *ngFor="let request of homologation.extensionRequests"
[ngClass]="{
'row-withdraw': (homologation.withdrawType !== null && homologation.withdrawType.code === withdrawTypesEnum.TotalWithdraw),
'row-partial-withdraw': (homologation.withdrawType !== null && homologation.withdrawType.code === withdrawTypesEnum.PartialWithdraw)
}"
>
<td *ngFor="let field of standard.homologationForm.fields">
{{ getCustomFieldValue(request.customFields, field.name) }}
</td>
<td style="border-right: none;">{{ request.homologationStartDate | appTechnicalDate }}</td>
</tr-->
<tr *ngFor="let request of homologation.helmetRequests"
[ngClass]="{
'row-withdraw': (homologation.withdrawType !== null && homologation.withdrawType.code === withdrawTypesEnum.TotalWithdraw),
'row-partial-withdraw': (homologation.withdrawType !== null && homologation.withdrawType.code === withdrawTypesEnum.PartialWithdraw)
}"
>
<!--td *ngIf="homologation.homologationNumber === 'PH.003.15-O'"></td>
<td *ngIf="homologation.homologationNumber === 'PH.003.15-O'"></td>
<td *ngIf="homologation.homologationNumber === 'PH.003.15-O'"></td-->
<td *ngFor="let field of standard.homologationForm.fields">
{{ getCustomFieldValue(request.customFields, field.name) }}
</td>
<td>{{ request.homologationStartDate | appTechnicalDate }}</td>
<td>{{ request.homologationEndDate | appTechnicalDate }}</td>
<td *ngIf="standard.technicalList.validity">{{ request.homologationEndDate.getFullYear() + 10 }}</td>
</tr>
</ng-container>
</tbody>
</table>
</ng-container>
<div class="warning-title page-break">
{{ standard.technicalList.englishWarning }}
</div>
<p *ngIf="warnings.length === 0">
There are no warnings for this product
</p>
<div class="warning-div" *ngFor="let warning of warnings">
<div [innerHtml]="warning"></div>
</div>
</kendo-pdf-export>
And the css code
.table-contents {
text-transform: uppercase;
border-collapse: collapse;
font-size: 8px;
width: 100%;
border-spacing: 0 calc(1rem + 2px);
padding-bottom: 2px;
page-break-inside: avoid;
th {
background-color: #CCC;
border:1px solid black;
border-right: none;
padding:5px;
text-align: center;
page-break-inside:avoid;
&:last-child {
border-right: 1px solid black;
}
}
tr {
page-break-inside:avoid;
//transform: scale(1);
}
td {
border:1px solid #000000;
border-top: none;
border-right: none;
text-align: center;
padding: 2px;
page-break-inside:avoid;
&:last-child {
border-right: 1px solid black;
}
}
}Thanks for you help !
Regards,