angular ui-grid column header is not aligned with data

Question

I am implementing a basic table ui-grid containing 6 columns that spans the width of the page, but I notice that the column header width is not neatly aligned with the data. Looking at the computed CSS value the width of the header vs data is off by <1 pixel (eg. 182.222229003906 in the header vs 182.986114501953 in data)

In the first few columns the difference is not noticeable but it gets more obvious in the rightmost columns. I already removed custom CSS classes to check that there's no interference with ui-grid's rendering but got the same result.

And then I found that even in some of the tutorial pages that behavior also exists. Example: this page in ui-grid's tutorial:

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

The gridOptions are very simple:

columnDefs: [
  { field: 'name' },
  { field: 'gender', cellFilter: 'mapGender' },
  { field: 'company' },
  { field: 'email' },
  { field: 'phone' },
  { field: 'age' },
  { field: 'mixedDate' }
]

I browsed other samples in the tutorial and find that not all grids suffer from this issue. (for example, this: http://ui-grid.info/docs/#/tutorial/401_AllFeatures is all neatly aligned) What affects this behavior and how it can be avoided?

Thanks!

Answer 1

I had the same issue.I used below style changes to fix the issue

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