ag-grid: Unable to Change the Alignment of the Header Text for the Columns in the Grid to Center in Ag-grid v13.0.0 (Bug)

I’m submitting a … (check one with “x”)

[X ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/ceolter/ag-grid/blob/master/CONTRIBUTING.md#question

Current behavior

Prior to Ag-Grid v13.0.0; the Header Text for the Columns in the Grid were Center Align. In Ag-Grid v13.0.0; the Header Text for the Columns in the Grid are Left Align. I have changed the Style for .ag-header-cell-label and .ag-header-cell-text; but it is not aligning the Header Text to Center. Please fix this Issue.

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

ag-Grid version: 13.0.1

Browser: Edge

Language: Angular JS

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 15

Most upvoted comments

Here’s another, very simple solution:

.ag-header-cell-text {
  flex: 1;
}

And then just set the headerClass-attribute of the respective column to text-align: center.

+19

cbossi on Apr 30, 2018

Now work fine

// Override
.ag-theme-balham .ag-header-cell-label {
  display: inline !important;
}
.ag-theme-balham .ag-header-cell-label > span {
  float: none !important;
}
---
text-center {
   text-align: center
}

thearabbit on Aug 3, 2018

The response from @nd48804 did not work for me. After inspecting the elements, I realize the menu button for the header was causing this “uncentered” header label.

What I did for ag-grid 17 using react is:

.ag-fresh  .ag-header-cell-label{
    float: none !important;
    width: auto !important;
    justify-content: center;
}
.ag-fresh .ag-header-cell-menu-button{
    position: absolute;
    float: none;
}

eglorenzana on Apr 6, 2018

Unable to Change the Alignment of the Header Text for the Columns in the Grid to Center in Ag-grid in angular 5

sunilbehera91 on Mar 7, 2019

https://stackoverflow.com/a/46495997/7289627 This answer helped me through the issue.

binDongKim on Jun 25, 2019