CODEWITHSUNDEEP
cssreactjsag-grid
Tokyo D
Tokyo D

Reputation: 233

Vertically center the text in the group headers for an AgGrid control using CSS?

I'm using react and trying to get the group labels to the left in this screenshot vertically centered, same as the values.

AG GRID screenshot

I've tried the following with no result:

.ag-header-group-cell-label {
    display: flex;
    align-items: center;
}

Upvotes: 1

Views: 487

Answers (3)

NearHuscarl
NearHuscarl

Reputation: 81370

Your approach is in the right direction. But if you inspect the element, you can see that the container that contains the arrow and the cell text has a class name called ag-cell-wrapper, so you need to target that element instead:

/* increase CSS specificity to override the ag-grid styles */
.ag-cell-wrapper.ag-cell-wrapper.ag-cell-wrapper {
  display: flex;
  align-items: center;
}

Codesandbox Demo

Upvotes: 1

Dan P
Dan P

Reputation: 924

You can try either of the following:

  • line-height set to the height of the cells (if that's predictable)
  • vertical-align: middle

Without more code, that's as much as I can suggest.

Upvotes: 0

Geoffrey Dulac
Geoffrey Dulac

Reputation: 46

Did you try to add margin auto to labels that you want to vertically center ?

margin: auto;

Upvotes: 0

Related Questions