wrapped text in ngx-datatable rows getting cut-off in print view

user_9034886 0
Viewed 925

I overwrote the css for ngx-datatable's datatable-body-cell-label class to allow the contents to wrap when printing. However, as an unwelcome side-effect, wrapped text is getting cut-off when the page breaks. enter image description here I attempted to remedy this by adding page-break-inside: avoid;' to the css for both thedatatable-body-cellanddatatable-body-cell-label` classes, but to no avail.

ngx-datatable in template:

    <ngx-datatable class="material results-grid engagement-specifics" [rows]="engagementSpecifics"
                   [columns]="engagementSpecificsGridColumns"
                   [headerHeight]="30" [footerHeight]="0" [rowHeight]="70"
                   [rowClass]="getEngagementSpecificsRowClass"
                   *ngIf="showReport(['engagementSpecifics'])">
    </ngx-datatable>

relevant css:

.datatable-body-cell {
    @media print {
      page-break-inside: avoid;
    }
  }

  .datatable-body-cell-label {
    @media print {
      // allow text wrapping
      white-space: normal !important;
      page-break-inside: avoid;
    }
  }
ngx-datatable angular css
1 Answers

We need block-level elements to avoid rows cropping:

@media print {
    ::ng-deep .datatable-scroll {
        display: block !important;
    }

    ::ng-deep .datatable-row-wrapper {
        display: block !important;
        break-inside: avoid;
    }
}

Note: page-break-inside is deprecated, please use break-inside instead.

user_179277980
Related