Ag Grid - How to set the width and height of a standard cell editor to the full width and height of the cell

Question

I have a standard cell editor and when I am in edit mode the width and the height of the cell editor is not the full width and height of the cell.

Should I overwrite the styles or is there any flag in the configuration to turn off this effect?

Answer 1

I had this same problem. If you look at the DOM, you'll see ag-grid adds a wrapper div around all custom editors, and it's actually that div that is the problem. I solved it by adding this to my global CSS:

.ag-react-container {
    /* 
     * This class is used on divs automatically inserted by AgGrid around custom cell editors.
     * Without this, I don't know of another way of ensuring that the underlying <input> can take
     * up 100% of the height of the parent cell, if it so chooses to.
     */
    height: 100%;
}

Answer 2

I think a better way to achieve this is to only modify the inline style editor css:

.ag-theme-balham .ag-cell.ag-cell-inline-editing{
 height: 100%;
}