agGrid and vertical center alignment of text in rows - Angular

Siemens iX
1

We have two pinned columns in an agGrid, a button acting as a context menu and a checkbox in order to select rows. After the pinned columns we have regular columns, usually with text content. Now it seems that not just he text cells are not vertically aligned in the center, but also context-menu button as well as checkbox are also not aligned in the vertical center. We tried to fix the alignment using css styles but we believe that proper alignment should come out-of-the-box. We believe that in future ix-versions, our effort to move pixels up or down using css, will possibly not be reliable.

alignment-not-in-vertical-center
alignment-not-in-vertical-center888×116 3.21 KB

Within stackblitz, there is “center” set for lockPosition and pinned so it aligns perfectly, however in our Angular application, “center” cannot be set.

2

Hello,
Thank you for reaching out and for your patience.

The options: ‘lockPosition’ and ‘pinned’ should only have an effect on the positioning of the columns themselves, and not the elements within the column cells.

If I understand your question correctly, for the first two columns you are using custom cell renderers. Styling like the vertical alignment is not automatically applied to elements within custom cell components. For this reason, it is necessary to add the appropriate styling to your components. For more information and examples, please refer to the official documentation of AG Grid.