Primeng turbo table cell data overlapping other cells

0
votes

How do I prevent primeng turbo table cell data from overlapping other cells, I tried to add - [style]=" {'overflow':'hidden' }" to : <tr> , <td> and <div>, and none of these elements solved the overlapping.. anyone have an idea how to solve that?

1
htmlcssangularprimengprimeng-turbotable

1 Answers

1
votes

Add class="ui-resizable-column" to each column and row. It prevents the data from other cells from overlapping into it (not it from overlapping into other rows), which is why in the example below, even the checkbox has it.

Example:

This will make the column headers not overlap: 

<th *ngFor="let col of columns" class="ui-resizable-column">
</th>
<th style="width: 2.25em" class="ui-resizable-column">
  <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>

Then you do the same for rows:

<td *ngFor="let col of columns" class="ui-resizable-column">
</td>
<td class="ui-resizable-column">
  <p-tableCheckbox [value]="selectedrow"></p-tableCheckbox>
</td>