unnecessary horizontal scroll bar coming inspite of using sizeColumnsToFit in ag-grid
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();});
.
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.