CODEWITHSUNDEEP
angularjsangular-ui-grid
aol
aol

Reputation: 377

angular ui-grid column header is not aligned with data

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!

Upvotes: 3

Views: 7711

Answers (4)

jfrubio
jfrubio

Reputation: 1

Fixed updating original code of ui-grid.css:

Modify the class and add the last line afther the original css code.

.ui-grid-top-panel { ..... float:left; }

Upvotes: -1

Punith Jain
Punith Jain

Reputation: 1677

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

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

Upvotes: 13

dras
dras

Reputation: 378

I ended up using the following from chuge on github.

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

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

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

https://github.com/angular-ui/ui-grid/issues/3854

Seems to still be a problem because there are numerous issues to this misalignment.

Upvotes: 1

santos
santos

Reputation: 484

I had this issue and was tearing my hair out for several hours: it showed up incorrectly in IE11 and Chrome v.51 (Windows)

I had the grid inside a TD in an html table - when I moved it out into a DIV, everything rendered correctly.

Upvotes: 0

Related Questions