ag-grid headers move to the opposite direction upon horizontal scroll

Question

I'm using ag-grid with angular 5 application. The application is rtl - right to left. In some of the grids I have a horizontal (right to left) scroll. I have just noticed that when I scroll left - the grid content moves right (ok) but the headers move to the opposite direction.

I enabled RTL on grid:

<ag-grid-angular #agGrid
                       style="width: 100%; height:100%"
                       id="myGrid"
                       class="ag-theme-balham"
                       [enableRtl]="true"
                       [enableFilter]="true"
                       [enableSorting]="true"
                       [columnDefs]="columnDefs"
                       [suppressDragLeaveHidesColumns]="true"
                       [enableCellChangeFlash]="true"
                       [enableColResize]="true"
                       [getContextMenuItems]="getContextMenuItems"
                       [defaultExportParams]="defaultExportParams"
                       [localeText]="localeText"
                       (gridReady)="onGridReady($event)">
      </ag-grid-angular>

I have noticed that when I take of the [enableRtl]="true", I dont see that problem, but the grid becomes LTR (I realy have to use the RTL).

Thanks for any help !

Answer 1

.ag-root{border:none !important;}