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

Question

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. 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;
    }
  }

@soccer7 a minimal reproducible on [codesandbox](https://codesandbox.io/s/8n66zopr9l?file=/src/app/app.component.ts) will be useful to understand the issue. — the Hutt, Jan 19 '22 at 05:41
Your URL errors out in browser section `ModuleNotFoundError Could not find module in path: '../@swimlane/ngx-datatable/release/index.css' relative to '/package.json'` — soccer7, Jan 20 '22 at 16:40
@soccer7 I gave up on ngx-datatable for this use case and used `mat-table` instead. — Boris Layvant, Jan 21 '22 at 17:12

score 0 · Answer 1 · answered Jan 25 '22 at 00:58

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.

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

1 Answers1