unnecessary horizontal scroll bar coming inspite of using sizeColumnsToFit in ag-grid

Question

I have upgraded my ag-grid version from 7.2.0 to v14.2.0. When I use sizeColumnsToFit() api with onGridReady or onGridSizeChanged event, it works but it keeps unnecessary horizontal scroll, may be due to wrong calculation of grid width.

This issue(?) can be seen at official example for ag-grid as well here,

https://www.ag-grid.com/javascript-grid-responsiveness/#example-example1

With the previous version, this works completely fine without any horizontal scroll.

When I manually call $scope.gridOptions.api.sizeColumnsToFit(), then it removes the horizontal scroll.

Here is my gridOptions:

        $scope.ag_grid_options = {
            headerHeight: 50,
            rowHeight: 50,
            //rowModelType: 'virtual',
            rowModelType: 'infinite',
            rowBuffer: 0,
            cacheOverflowSize: 1,
            infiniteInitialRowCount: 1,
            cacheBlockSize: 50,
            paginationPageSize: 50,
            //virtualPaging: true,
            enableServerSideSorting: true,
            enableSorting: false,
            enableColResize: true,
            angularCompileRows: true,
            onGridSizeChanged: function (param) {
                $scope.ag_grid_options.api.doLayout();
                $scope.ag_grid_options.api.sizeColumnsToFit();
            },
            columnDefs: grid_column_definitions
        };

I know I can use property suppressHorizontalScroll= true. But I do not want to use this because with it, scroll will not appear when user will resize the column manually.

This is reproducible on official example as well.. see here https://www.ag-grid.com/javascript-grid-responsiveness/#example-example1 @lin — undefined, Nov 23 '17 at 11:40
This is a normal behavior. A scrollbar pops up if the total column width is bigger than the container. It's not a bug, its a feature.Changing `minWidth` property of headerFields will enable this scroll bar. — lin, Nov 23 '17 at 11:53
hello... no one (here me) want to have scroll bar unnecessary.. if u have downvoted due to this.. then u should understand that.. i am looking for a solution to not have this scroll bar. — undefined, Nov 23 '17 at 11:56
I didn't but you should change `minWidth` / `maxWidth` property of headerFields and you will be fine. — lin, Nov 23 '17 at 11:57

score 9 · Answer 1 · answered Aug 27 '19 at 15:59

9

I ran into the same/similar issue. The root problem was that I resized my columns before a vertical scrollbar was added. To get around this, resize AFTER adding the rows. Even then it may not work without a timeout

    this.http.get('someEndPoint').subscribe(rows => {
      this.rowData = rows;
      setTimeout(()=>{params.api.sizeColumnsToFit()}, 50);
    });

This may be a different symptom than what the OP saw, but could be useful for others.

answered Aug 27 '19 at 15:59

solbs

940
3
15
29

1

`sizeColumnsToFit` needs be called before rendering data on grid – blazehub Sep 17 '19 at 04:55
1

@blazehub is correct -- The above code is a repeated call to `sizeColumnsToFit()` – solbs Sep 17 '19 at 15:58
1

Seems like the best approach for it. – Rodrigo Borba Jan 20 '20 at 11:29
This has worked for me, thanks! – Zoman Dec 30 '21 at 21:21
This should be the accepted answer. In my case I had to set this.dataGrid.api.setRowData(this.formData); and then this.dataGrid.api.sizeColumnsToFit(); – Campey May 18 '22 at 02:17

score 8 · Answer 2 · answered Oct 26 '20 at 09:27

8

the best solution for me is calling api.sizeColumnsToFit() on modelUpdated event

no need to setTimeout and set width

the example code:

<ag-grid-angular
  [defaultColDef]="defaultColumnDefs"
  [columnDefs]="columnDefs"
  [rowData]="data"
  (gridReady)="onGridReady($event)"
  (modelUpdated)="onModelUpdated()"
>
</ag-grid-angular>

in onModelUpdated() should call api.sizeColumnsToFit

private gridApi;

onGridReady(params): void {
  this.gridApi = params.api;
}

onModelUpdated(): void {
  this.sizeToFit();
}

sizeToFit(): void {
  this.gridApi.sizeColumnsToFit();
}

answered Oct 26 '20 at 09:27

H.Azizkhani

893
10
11

This is the only worked for me - thank you! – Alex S. May 26 '22 at 05:53
This works but it causes other issues. For instance if you resize the columns and click on sort a column, the model changes so it resizes everything again. – polmonroig Nov 29 '22 at 09:59

lin · Accepted Answer · 2020-01-21T09:18:01.907

7

It's no a bug, its a feature. A scrollbar appears if the total width count of all columns is bigger than your wrapper. You should change minWidth / maxWidth property of headerFields and you will be fine.

var columnDefs = [
  {headerName: 'Athlete', field: 'athlete', minWidth: 150},
  {headerName: 'Age', field: 'age', minWidth: 50},
  {headerName: 'Country', field: 'country', minWidth: 120},
  {headerName: 'Year', field: 'year', minWidth: 90},
  {headerName: 'Date', field: 'date', minWidth: 110}
];

Side note: If the grid data is changed due to scope changes or not initial defined you need to recall sizeColumnsToFit() in a new diggest circle like setTimeout(() => {this.gridApi.sizeColumnsToFit();});.

edited Jan 21 '20 at 09:18

answered Nov 23 '17 at 12:03

lin

17,956
4
59
83

7

how is this a solution? it doesn't give you the desired results. here you have to calculate yourself so it doesn't overflow and create a horizontal scrollbar. – lolplayer101 Sep 13 '19 at 09:20
2

@lolplayer101 feel free to add a answer which may help others :) – lin Sep 13 '19 at 10:12
1

It can not be called as feature. If you have only two columns, and its content is a short string it also happens. Actually it seems like the AgGrid is calculating horizontal size without the vertical scroll. This answer should not be marked as correct. – Rodrigo Borba Jan 10 '20 at 19:05
@RodrigoBorba this nothing depending on AG Grid. This happends if your container is not on full width - check this example - https://next.plnkr.co/edit/?p=preview&utm_source=legacy&utm_medium=worker&utm_campaign=next&preview. And 4 sure a scrollbar is feature how else would you be able to see the content which width is bigger than the rendered ag grid view container... The scrollbar appears even if you use `sizeColumnsToFit()` see here: https://next.plnkr.co/edit/e7e02hE6AxbvjPJJ Thats why my answer is right. – lin Jan 13 '20 at 10:59
@lin, overflow scroll is indeed a feature, but not is this case. Imagine that you do not have a minWidth/maxWidth defined on columns definition. sizeColumnsToFit gets total width and divides it by columns visible. 1000 px of width divided by 2 columns would result on 500 px per column, which still less than 1000 px available, meaning that there is no reason for a x-overflow-x be shown. – Rodrigo Borba Jan 13 '20 at 21:25
@RodrigoBorba I dont understand. Please create a fiddle and show me your problem. Anyway, thanks for the downvote. -.- – lin Jan 15 '20 at 09:18
There is no personal pleasure in downvote a answer. It has to do with the fact that it is not the correct answer. You have assumed that the amount of columns that @undefined is using is bigger than horizontal space when no information about it was given. Please, check stackblitz below: https://stackblitz.com/edit/ag-grid-sandbox-sizecolumnstofit try with both RowData initialization. – Rodrigo Borba Jan 19 '20 at 17:09
1

@RodrigoBorba it doesnt work, because you calling `this.gridApi.sizeColumnsToFit();` in the same diggest circle where you set the data. Simply call `this.gridApi.sizeColumnsToFit();` in a new diggest circle and you will be fine - https://stackblitz.com/edit/ag-grid-sandbox-sizecolumnstofit-qw3jri The answer is still correct: =] It works the same if you define the minWidth instead of using `sizeColumnsToFit()`. – lin Jan 20 '20 at 08:30
Ok, now you gave a correct answer for it. Setting size of columns is a limited workaround. For example, it would be impossible to handle with dynamic columns. Please, edit your answer and I will upvote instead :) – Rodrigo Borba Jan 20 '20 at 11:27
@RodrigoBorba I updated my answer for your case. The user did not give any information about his data binding or data changes. Thats why the original answer is still correct. Welcome to stackoverflow =). – lin Jan 21 '20 at 09:19
Actually I'm here for a while already, Lin... Kindly take a look at: https://stackblitz.com/edit/ag-grid-sandbox-sizecolumnstofit-dvzn7d and please explain to me why there is a overflow-x. Before anwser me, try to add more columns and remove some os them and check the behavior. – Rodrigo Borba Jan 21 '20 at 11:31

codenamezero · Answer 4 · 2020-01-11T20:50:24.927

4

A bit late, but for those who is looking for completely disable the horizontal scroll or adjust the horizontal scroll's height (even setting them to 0). You have to also set the scrollbarWidth.

gridOptions: {
   suppressHorizontalScroll: true,
   scrollbarWidth: 0
}

You can take a look at AgGrid's source code on how they deal with horizontal scroll here: https://github.com/ag-grid/ag-grid/blob/996ffcdcb828ffa3448d57fa919feb9eb465df15/community-modules/core/src/ts/gridPanel/gridPanel.ts#L889

edited Jan 11 '20 at 20:50

answered Nov 07 '19 at 15:08

codenamezero

2,724
29
64

Unfortunately the page is not available anymore – Rodrigo Borba Jan 10 '20 at 19:14
Is there, is just that they keep changing their source structure. I've updated the link. – codenamezero Jan 11 '20 at 20:50
This is probably undesirable in a mobile environment where the user can change widths, no matter how ugly a scrollbar is, you simply will not be able to view all the table. – PeterS Dec 18 '20 at 12:34

score 2 · Answer 5 · answered Sep 10 '18 at 19:06

Another possible solution, just presented to me by a collegue:

Within the column defs you can set the width for each column by calculating the the client width, and then dividing it by the number of columns:

width: (document.documentElement.clientWidth - 40) / (this.numColumns)

In this case, 40 is the sum of the padding on either side of the grid (20 left + 20 right).

score 1 · Answer 6 · answered Jul 28 '20 at 14:21

1

This issue remains in v22 and the above solutions didn't seem ideal. The best fix I found was to call sizeColumnsToFit in the onModelUpdated event handler. See https://github.com/ag-grid/ag-grid/issues/2310.

answered Jul 28 '20 at 14:21

James

1,720
5
29
50

score 1 · Answer 7 · edited Oct 11 '21 at 09:24

for large scroll appearing in scrollbar, we need to make use of onGridReady event on the grid, which gives gridApi as parameter in callback function and make use of sizeColumnsToFit function to keep the resizing work.

If the scroll length is small, it is appearing because of the width introduced for the vertical sidebar (due to the change in vertical height of the grid).

My Solution:

Locate the element's selector which is causing vertical scrollbar to appear.
It will have overflow/overflow-y to "auto/scroll". Making it to overflow/overflow-y to "overlay" will resolve your problem.

This worked for me everywhere.

Arun Kumar · Answer 8 · 2022-01-25T08:21:17.530

This approach is for Angular 2+, use sizeColumnsToFit() inside firstDataRendered event instead of gridReady or gridSizeChanged event it will remove the horizontal scrollbar.

 <ag-grid-angular
  [defaultColDef]="defaultColumnDefs"
  [columnDefs]="columnDefs"
  [rowData]="data"
  (gridReady)="onGridReady($event)"
  (firstDataRendered)="onFirstDataRendered($event)">
 </ag-grid-angular>

private gridApi;

onGridReady(params): void {
  this.gridApi = params.api;
}

onFirstDataRendered(): void {
  this.gridApi.sizeColumnsToFit();
}

unnecessary horizontal scroll bar coming inspite of using sizeColumnsToFit in ag-grid

8 Answers8