ellipsis dont show on overflow

[tmburnell]

I'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

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

[eddy-geek]

@tmburnell your html code has been eaten by Markdown.

also, not to divert this thread, but the issue also affect headers, column title gets truncated when it is too long (and the sort arrow is then hidden as well).

[adammedford]

overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; has to be applied to the element that wraps inline elements.

Truncation feels like a bad choice for headers though.

[tmburnell]

Should I add the style myself to the inner div, or will this be something that will be upgraded?

[deeg]

I see the truncation work just fine.

@amcdnl, I believe this should be closed.

@tmburnell, please give an example with a plunker if you are having issues.

[adammedford]

This is easily reproducible using Swimlane's own 10k rows demo. Just adjust the columns to be narrower and voila. Apply the fix I specified to a single cell and ellipsis shows and disappears when column is expanded. On Chrome.

[tmburnell]

https://plnkr.co/edit/L1IlJScNjEdQTGarzanm

look at the second column

[amcdnl]

@tmburnell - make a PR plz.

[grv750]

any update on this guys?

[tmburnell]

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.

ngx-datatable.material {
    // fix ellipsis on header
    datatable-header-cell {
    * {
        width: 100%
    }

    span {
        display: inline-block;

        span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        }
    }
    }

    // fix ellipsis on cells
    .datatable-body-cell-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    }
}