column header names often have ellipses when not needed v3.0.0-rc.16-9c495da

[ghost]

I have several column headers (using field/name in ColumnDef) in v3.0.0-rc.16-9c495da - 2014-12-05.
The header looks like:

but if I popup the column menu, you can see that the headers are actually fully displayed:

[c0bra]

A couple questions:

1. Which browser is this in? Does this happen the same on different browsers?
2. If you inspect the column header element and manually increase its width by 1px, does the ellipsis go away?

[ghost]

I am running in IE11 and cannot try another browser since we currently have a dependency on a .Net control.
The column in question was originally 134px wide. In the IE debugger, I had to increase it to 147px to make the ellipses go away! Notice all the space to the right!

[cid:image001.png@01D013A4.E465DE70]

The active layout is:

[cid:image002.png@01D013A4.E465DE70]

/steve

Stephen R. Alpert, PhD
Principal Technical Architect
GE Healthcare
Clinical Business Solutions

T +1 617 519 2216
F +1 617 519 2625
E steve.alpert@ge.comblocked::mailto:steve.alpert@ge.com
www.gehealthcare.comhttp://www.gehealthcare.com

     GE imagination at work

From: Brian Hann [mailto:notifications@github.com]
Sent: Tuesday, December 09, 2014 11:06 AM
To: angular-ui/ng-grid
Cc: Alpert, Stephen R (GE Healthcare)
Subject: Re: [ng-grid] column header names often have ellipses when not needed v3.0.0-rc.16-9c495da (#2305)

A couple questions:

1. Which browser is this in? Does this happen the same on different browsers?
2. If you inspect the column header element and manually increase its width by 1px, does the ellipsis go away?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/2305#issuecomment-66306526.

[c0bra]

@SteveRa FYI your image attachments didn't come through to github.

[ghost]

Here is a view of the field I was looking at:

The generated code:

[c0bra]

I can't reproduce on in the column resizing tutorial in Chrome, but I do see it in IE11. Looks like it's particular to that browser.

It's possibly because the text-overflow property is on the .ui-grid-contents class and the actual text is ending up in a <span ng-binding> element. I can't get it to "ellipsize" properly by moving the styles around manually, however.

[ghost]

I'm still encountering this in the 3.0 rc19 release. Here it is in IE-11

and here it is in Chrome...

[c0bra]

Pushing this to 3.1 and removing bug flag as I think it's a browser issue.

[wattsbn]

This is actually a really annoying bug. It may be IE's fault, but I think we can make it less likely to happen.

The problem is actually with the sort icon and not with the actual text of the header. If there isn't enough room for the sort icon, then IE will show an ellipsis. This will happen even if the column is not sortable because ui-grid only hides it.

Adding the following to ui-grid.css will fix this situation:

.ui-grid-invisible {
    display: none;
}

It would be nice if you could at least add this one line for 3.0 instead of waiting until 3.1

[ghost]

This issue still exists, for me it is Firefox...ellipsis show up in header text when not needed..while Chrome it looks fine, .with overflow: initial, it does work , but I am checking if a ui grid version could help, thanks!

[bharatpatil]

I'm also facing this in Firefox 48.0.1. (Mac/Windows)
However I'm facing it when text is aligned to the right in column headers.

As from below screenshot you can see, even if there is a enough space to display full column name, it is showing ellipsis.

[mportuga]

Okay, after reviewing the comments in this bug, I believe that the reason for the overflow is a padding on the header column which is there to ensure there is always enough space for both the sort icon and column menu dropdown. It can be worked around with the help of CSS and I believe the solution provided by @wattsbn will work. If I get a chance I will do it, but PRs are welcome.