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!

I see the problem you mentioned on the single filter tutorial page in both IE and Firefox, but not in Chrome. So, unfortunately (or fortunately, depending on your situation), it looks like it's browser-specific. I notice the one that works has columns with a fixed width. I wonder if it'd be worth experimenting with that first - try one, some or all columns with specific widths? — S. Baggy
– S. Baggy, Commented Aug 26, 2015 at 20:54
thanks for that observation - fixed width columns don't have that issue. I'm going to do that for now. — apol
– apol, Commented Aug 27, 2015 at 10:05
I generally use percentages for specifying the width, so that might work too. (Our users are required to use Chrome, so I don't know for sure if that will work, as I never need to use the other browsers...) — S. Baggy
– S. Baggy, Commented Aug 27, 2015 at 20:32

Punith Jain · Accepted Answer · 2018-03-12 10:55:35Z

13

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

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

edited Mar 12, 2018 at 10:55

answered Aug 5, 2016 at 7:02

Punith Jain

1,6871 gold badge15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Diament Over a year ago

This fixed it thanks, but I wish I didn't have to do this #codesmell

dras · Accepted Answer · 2017-11-11 02:17:55Z

1

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.

answered Nov 11, 2017 at 2:17

dras

4087 silver badges15 bronze badges

Comments

santos · Accepted Answer · 2017-03-17 15:43:08Z

0

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.

answered Mar 17, 2017 at 15:43

santos

5143 silver badges6 bronze badges

Comments

jfrubio · Accepted Answer · 2019-03-08 07:57:02Z

-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; }

answered Mar 8, 2019 at 7:57

jfrubio

13 bronze badges

Collectives™ on Stack Overflow

angular ui-grid column header is not aligned with data

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related