ellipsis dont show on overflow
See original GitHub issueI’m submitting a … (check one with “x”)
[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here
Current behavior When the data of a column overflows it truncates the data
Expected behavior
the CSS on the column has this
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
So i would assume i would see an ellipsis.
Reproduction of the problem
I believe this is the issue:
datatable-body-cell has the style above, then <div class="datatable-body-cell-label">
has a slightly smaller size. then finally we have a span that overflows.
Therefore due to the extra layer between the style and the overflow content we dont get the ellipsis.
What is the motivation / use case for changing the behavior? Want the user to know they are not seeing all the content. Or if you can wrap the text I would be good with this option too.
Please tell us about your environment: na
-
Table version: 0.7.x primeng 2.0.4
-
Angular version: 2.0.x @angular/common: 2.4.10 @angular/compiler: 2.4.10 @angular/core: 2.4.10 @angular/flex-layout: 2.0.0-rc.1 @angular/forms: 2.4.10 @angular/http: 2.4.10 @angular/material: 2.0.0-beta.2 @angular/platform-browser: 2.4.10 @angular/platform-browser-dynamic: 2.4.10 @angular/router: 3.4.10 @angular/cli: 1.0.0-rc.4 @angular/compiler-cli: 2.4.10
-
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 ] Have only tested chrome
-
Language: TypeScript
Issue Analytics
- State:
- Created 7 years ago
- Reactions:5
- Comments:9 (2 by maintainers)
Below is what I used to fix the issue in my project … However it has side effects that might not be wanted by some users. So I did not plan on making a PR. As you can see in this screen shot the sort arrow gets pushed to the end of the cell instead of being next to the word. I am not sure you can have both (the sort arrow next to the word and the ellipsis. So maybe we add a class to make them work but you have to flag you want it.![image](https://user-images.githubusercontent.com/25113013/26976704-9e697288-4cea-11e7-9db4-1065a9efd691.png)
@tmburnell - make a PR plz.