IE9 ui-grid column headings (titles) misaligned

[hsiraj555]

IE 9 does not align the columns titles properly on top of each column. Furthermore, text-overflow:ellipsis does not work on column heading.

This issue can be observed by resizing the columns in following link using IE9:
http://ui-grid.info/docs/#/tutorial/204_column_resizing

I would appreciate if somebody has any idea why is this and what's the solution.

[c0bra]

I think IE9 has problems with the table-cell display type and max/min widths as we use them. Not sure if there's <IE10 styles that we can apply to fix it without breaking other things...

[joseabraham99]

@c0bra Have you find any solution for this alignment issue.

Thanks

[c0bra]

I have not had a chance to look at it yet.

[Bv202]

Hey,

Have you had a look at this issue already? I have exactly the same problem. In the meanwhile, is there some sort of workaround available?

Thanks!

[sahil-kapoor]

Hi,

I am also facing the same problem. Please help me with providing some workaround.

[sahil-kapoor]

@c0bra
Hi,

Any update on this. This also happens if we increase the number of columns .

[Bv202]

Yup, this bug is very annoying and we're urgently looking for a fix here.

[fly0o0]

@hsiraj555 I have fixed it by a trick, bellow is the CSS. But I do not figure out the reason caused the bug. You can use this as temporary solution before the bug fixed.

.ui-grid-header-cell-wrapper {
display: block;
}

.ui-grid-header-cell-row {
display: block;
}

.ui-grid-header-cell {
display: block;
float: left;
}

[c0bra]

@chuge Thanks; I've included this in a IE9-only condcom.

[JLLeitschuh]

This was not fixed. This commit broke the build.

[prksean]

Hello, any update on this issue? I see this happening in Chrome as well.

[okonon]

same issue here adn @chuge 's workaround worked for me.

[SumeetKhandre]

Hi, the same issue is happening in Chrome browser also. Its happening because when we click on tab by navigating cursor in Inline filter, When it goes to last column, after that the alignment is not proper. When we scroll from left to right then it will work fine.

Please help us to resolve.

[adrianviegas]

Similar issues
#5629
#6041
#4944

[mportuga]

Removed IE9 support.

[raghavs280]

The below css fixes the issue but it removes the filtering row in the Ui-grid
.ui-grid-header-cell-wrapper {
display: block;
}

.ui-grid-header-cell-row {
display: block;
}

.ui-grid-header-cell {
display: block;
float: left;
}

[apjaga]

To solve the header alignment issue add below mentioned code in your "ts" file
onGridReady(params) {
this.gridApi.sizeColumnsToFit();
}