CODEWITHSUNDEEP
angularangular-material
NewBee
NewBee

Reputation: 247

Angular Material Table Cell Data wrapping

I m using Angular material for displaying table data. This is just partial code. The table is embedded in material card. The data in the table cell gets messy when the length of the field is more. i have attached the screenshot for the same

<mat-card-content fxLayout="column" fxLayoutAlign="space-between" fxFlex>
  <h4>Incidents</h4>
  <mat-table #table [dataSource]="dataSource" matSort class="mat-elevation-z8">
    <ng-container matColumnDef="IncidentId">
      <th mat-header-cell fxFlex *matHeaderCellDef mat-sort-header>IncidentId</th>
      <td mat-cell fxFlex *matCellDef="let element">{{ element.IncidentId }}</td>
    </ng-container>
    ...

Here's how it looks:

enter image description here

I have used word wrap but it didn't help

The same code appears in IE in the below format

[enter image description here2

Upvotes: 11

Views: 38932

Answers (2)

keemsisi
keemsisi

Reputation: 419

This should fix the wrap issue with the Angular material table:

put this style in your component's style file (.css or scss or any other style extension) 

 td , th {
    white-space: normal;
    word-wrap: break-word;
    max-width: 200px;
}

You can adjust the max-width to your taste. It actually worked for me in my case.

Upvotes: 18

Vivek Kumar
Vivek Kumar

Reputation: 5040

As far as I remember

fxLayout="column" fxLayoutAlign="space-between" fxFlex

fxFlex is deprecated and fxLayout should be fxLayout="column wrap"

I gues you have overflow: hidden

Can you apply these styles on on that column

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

Upvotes: 8

Related Questions