0

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?

Hadas
  • 41
  • 1
  • 11

1 Answers1

1

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>
JAC
  • 297
  • 2
  • 8
  • This solution gave me the idea to use my own class so I could add some more stuff there. for example for overflow: auto; because I want to see all the text – Noa Mar 29 '18 at 11:43
  • using `class="ui-resizable-column"` makes the cell with a scroll where it was overlapped. and using `overflow: auto;` didn't help. – Hadas Apr 09 '18 at 06:51
  • Are you using internet explorer? Does it do the same in different browsers? – JAC Apr 10 '18 at 13:38
  • @JAC same for chrome – samheihey Jan 13 '20 at 02:50