CODEWITHSUNDEEP
angularprimeng
Mohan
Mohan

Reputation: 263

PrimeNG datatable column text overlapping with other columns

I have implemented datatable excel like filter as per the example given in PrimeNG documentation. To make filter dialog visible I have to provide overflow style attribute as visible as given below

<p-column *ngFor="let col of propsTableCols" [field]="col.field" 
[header]="col.header" [filter]="true" filterMatchMode="in" [sortable]="true"
[style]="{'overflow':'visible'}">

Because of 'overflow':'visible' style column text is going beyond column border and overlapping with other columns text. My requirement is to "clip" the text in columns. Please let me know how can I achieve this.

If I give overflow as hidden column text is clipped but the filter dialog is not getting displayed.

Note: Implementing word wrap as given below is breaking the words in column not to overlap with other columns but I need to clip it as per my requirement

.ui-datatable thead th {
word-wrap: break-word;
}

Upvotes: 4

Views: 3205

Answers (1)

A. Roussos
A. Roussos

Reputation: 258

You have to set the overflow: hidden in the detail rows only. The best solution is to set a css class that affects only the header with the overflow:visible attribute, otherwise it will be inherited to the detail rows as well. Another possible solution is to remove the style and check what happens

Upvotes: 2

Related Questions