[Fixed] why header cells are not aligned with the body cells?

Issue

rowData: any = [];rowModelType = ‘serverSide’;
defaultColDef: any = { width: 50, sortable: true, resizable: true, };
columnDefs: any = [];rowSelection = ‘single’; public getRowHeight: any;
private paramRefreshAgGrid: any; private gridColumnApi: any;
private gridApi: any;
constructor() {
this.gridOption()
} gridOption() {
this.columnDefs = [
{ headerName: ‘نوع ارز’,field: ‘currencyCode’,width: 200,
},{ headerName: ‘خرید’,field: ‘buyEts’, width: 200, },
{ headerName: ‘انتخاب’, field: ‘sellEts2’, width: 200, },
{ headerName: ‘خرید’, field: ‘buyEts3’, width: 200, },
{ headerName: ‘انتخاب’, field: ‘sellEts’,width: 200, },
{ headerName: ‘خرید اضافه’, field: ‘buyExternalCheque’, width: 200 }
,{ headerName: ‘مبلغ’, field: ‘buyMoney’, width: 200,}, ]; }
onGridReady(params: any) {
const $this = this;
if (params) {
this.gridApi = params.api;this.gridColumnApi = params.columnApi;
this.paramRefreshAgGrid = params; }
const datasource = {
getRows(params: any) {
const data: any = [
{currencyCode: ‘Ford2’, buyEts: ‘Mondeo’, sellEts: 32000, sellEts2: 32000 , sellEts3: 32000 , buyExternalCheque: 500 ,
buyMoney: 100000},
]
params.successCallback(data, data.total);
$this.gridApi.sizeColumnsToFit();
}
};
if (params) {
params.api.setServerSideDatasource(datasource);
}
}

<ag-grid-angular
  style="width: 100%;"
  [ngStyle]="{'height': '50vh'  }"
  id="logGrid"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [enableRtl]="true"
  [rowModelType]="rowModelType"
  [animateRows]="false"
  [rowSelection]="rowSelection"
  [debug]="true"
  [rowData]="rowData"
  [getRowHeight]="getRowHeight"
  (gridReady)="onGridReady($event)"
  [paginationPageSize]="100"
  [suppressDragLeaveHidesColumns]="true"
</ag-grid-angular>

I use the "ag-grid-angular": "20.2.0", in Angular 11 when I scroll the header The header cells are not aligned with the body cells.enter image description here

What solution do you have to fix this error?
thanks !!

Solution

Version 20.2.0 of ag-grid-angular is 2 years old. Try installing the latest version of ag-grid-community and ag-grid-angular – I would also delete node_modules folder afterwards and do a clean npm install

This may solve the problem (or at least narrow it down)

Note You should highlight in the question that the issue is only occurring in Chrome

Leave a Reply

(*) Required, Your email will not be published