CODEWITHSUNDEEP
cssreactjsag-gridag-grid-react
Naresh
Naresh

Reputation: 25823

How to make cell content in ag-grid centered vertically?

I am trying to decrease the row height of ag-grid by setting gridOptions.rowHeight. While this indeed decreases the row height, but the content is not centered vertically in the row. What's the best way to do this?

I also tried changing the grid-size parameter of the theme, but it runs into the same issue.

Here's the grid without any gridOptions. I measured the row height to be 42px (although the docs say that it should be 25px).

enter image description here

Here's what I get when I reduce the row height to 36px (gridOptions={{ rowHeight: 36 }}):

enter image description here

Notice that the content is no longer vertically centered.

This becomes even more apparent when I increase the row size to 100px. The content is clearly not centered.

enter image description here

Upvotes: 5

Views: 6282

Answers (2)

ironmouse
ironmouse

Reputation: 1386

I had the same issue with a ag-grid custom cell renderer that contained images that should be vertically centered.

I solved it by adding a CSS class to the cell renderer during the init() call...

init(params: MyCellRendererParams) {

    const parentElement = params.eParentOfValue;
    parentElement.classList.add("my-cell-renderer-parent");

    // ...
}

that styled its child in verically centered and...

.my-cell-renderer-parent {
  display: flex;
  align-items: center;
}

... added a text-overflow: ellipsis to all ag-cell-wrappers-children (since the overflow attribute isn't working anymore with display: flex on the parent):

.my-cell-renderer-parent .ag-cell-wrapper {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

Upvotes: 1

NearHuscarl
NearHuscarl

Reputation: 81833

Cell content can be vertically aligned using css only.

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

You can also add inline styles in the column definitions.

<AgGridReact
  rowHeight={50}
  defaultColDef={{
    cellStyle: (params) => ({
      display: "flex",
      alignItems: "center"
    })
  }}
  {...}
/>

Live Demo

Edit 64058096/decreasing-row-height-in-ag-grid

Upvotes: 2

Related Questions