Primeng: [TurboTable] / p-table column contents overflows into adjacent column

Created on 23 Jan 2018  路  3Comments  路  Source: primefaces/primeng

There is no guarantee in receiving a response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
http://plnkr.co/edit/p9Q3IfJAAqEKtSXla0vx?p=preview

Current behavior
Still loving TurboTable for its speed, but having a few issues getting it to behave as well as p-dataTable in order to get it accepted by the team.
Long words overflow into the adjacent column if the column is too narrow to display the whole word, making text illegible. Shorter words are correctly wrapped.

Expected behavior
If a word is too long to fit within a column, it should be wrapped even if that means wrapping the text in the middle of a word.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?
Keep the text in the table legible regardless of the data displayed.

Please tell us about your environment:
Angular CLI: 1.6.3
Node: 8.9.4
OS: win32 x64
Angular: 5.2.1

  • Angular version: 5.2.1

  • PrimeNG version: 5.2.0-rc.1

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
    Chrome: 63

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    Typescript 2.4.2

  • Node (for AoT issues): node --version =
    Node: 8.9.4

All 3 comments

This is expected due to layout:fixed;

.ui-table table {
    table-layout:auto !important;
}

Fixes this, will add a property to expose this.

If you enable autoLayout, that would correct things in 5.2-RC2

If you put this property table-layout:auto !important; in css the tables are no longer responsive in the system;

Was this page helpful?
0 / 5 - 0 ratings