ag-grid auto column size not working if font is big

When font size is big, auto-sizing (no matter in what way) trims the column data.

I tried it on plnkr.com link referred from: https://www.ag-grid.com/javascript-grid-resizing/#

I styled the rows to have 20px font size and since then the autosizing doesn't work properly. see in the image, country & date columns are cut in the middle after "Aut-Size all" and after double click to autosize a single column. plnkr sample

any ideas?

thanks

Solution

You can fix this by applying your bigfont class via cellClass instead:

https://plnkr.co/edit/qzwOYqN6ybXJns0xDvqy?p=preview

var gridOptions = {
    defaultColDef: {
        resizable: true,
        cellClass: 'bigfont',
    },
    columnDefs: columnDefs,
    rowData: null,
    //rowClass: 'bigfont',
    onColumnResized: function(params) {
        console.log(params);
    }
};

This is happening because to work out the width of a cell, ag-grid clones it. The cloned cell doesn't have some of the parent DOM structure, such as a row with your specified rowClass.

It's a marginal bug in ag-grid.

Related to this, on GitHub: