Misalignment Column header separators with actual column separators in high resolution display

[banajit]

It has been noticed that, in high resolution display, column headers separator are not aligned with actual data column separator. The issue exist in the ui-grid example itself.

http://ui-grid.info/docs/#!/tutorial/321_singleFilter

Also screenshot attached.
Tested monitor resolution: 1920x1080

Please let me know if there is any workaround exist.

[m4m4m4]

This also occurs on windows if the display DPI setting is set on anything but 100%
It also happens if you zoom to a odd percentage

The issue is that the header display property is table based and the content is block based.

Here is a simple css fix that changes the header to be flexbox based instead:

/* UI-Grid header non-alignment fix */
.ui-grid-header-cell-wrapper {
    display:flex;
    width:100%;
}
.ui-grid-header-cell-row {
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;
}
.ui-grid-header-cell {
    display:block;
}
/* Fixes IE word-wrap if needed on header cells */
.ui-grid-header-cell > div {
    flex-basis:100%;
}

And here is a plunker with all features enabled with the fix
http://plnkr.co/edit/04D1vmJRROXkKGfxNZfU?p=preview

I changed the less file in the source code and no tests seem to fail. I however know that flexbox has some odd behaviour in IE and Safari. This will also probably break every custom template out there.
Let me know if this is the direction you want to take and i'll submit it as a pull request @mportuga

[mportuga]

@m4m4m4 At the moment, the only IE versions that we support are 10 and 11, so if you can make it work for those, be it via media queries or something else, then I think that would be a great solution. And for worse case scenario, I am willing to sacrifice IE10 support, although I rather not drop that one just yet.

[m4m4m4]

Looks like it is working as it should on IE10 if I add the vendor prefix "-ms", will make a pull request now

[banajit]

Thank you so much for the fix, this works.

[kevin4760]

Awesome fix! Thank you!