ag-grid CellEditor cell height not correct

Question

I am using ag-grid with react 16.12.0.

I have this column defintion:

   const columnsAuszeichnungenn = [{
        headerName: "Award",
        field: "auszeichnungsname",
        resizable: true,
        sortingOrder: ['asc']
    }, {
        headerName: "From",
        field: "von",
        resizable: true,
        editable: true,
        cellEditorFramework: CellEditorOnlyNumbers,
        onCellValueChanged: (params: any) => {
            //Check if the user has changed the value
            if (params.oldValue !== params.newValue) {
                doSomething(params.newValue, "von", params.data);
            }
        },
        cellStyle: {'white-space': 'normal'},
    }];

CellEditorOnlyNumbers:

const CellEditorOnlyNumbers: React.FC<Props> = (props, ref) => {

    const [error, setError] = useState<boolean>(false);
    const [value, setValue] = useState<string>(props.value);

    function onBlurcheckInput(e: any): void {
        const value = e.currentTarget.value.trim();
        /*Zuerst überprüfen wir, ob wir vlt nicht nur in das Textfeld hinein geklickt
        haben und ohne etwas zu machen wieder raus gegangen sind, deshalb erste if*/
        if (value !== props.value && !error) {
            props.api.stopEditing();
        }
    }

    function onchangeCheck(e: any): void {
        const value = e.currentTarget.value.trim();
        let isError = false;
        if (value === "" || isNaN(value)) {
            //Es ist keine Zahl -> Fehler
            isError = true;
        }

        setValue(value);
        setError(isError);
    }


    useImperativeHandle(ref, () => {
        return {
            getValue: () => {
                if (error) {
                    //return initial value
                    return props.value;
                } else {
                    return parseInt(value);
                }
            }
        };
    });

    return (
        <>
            <FormControl
                error={error}>
                <Input
                    onBlur={onBlurcheckInput}
                    onChange={(e: any) => onchangeCheck(e)}
                    value={value}
                    type="number"
                />
            </FormControl>
        </>
    );
};

export default forwardRef(CellEditorOnlyNumbers);

And I have this behaviour:

The size of the cell is not correct. I would like to make the cell editor the same height as the parent row. Sadly I have no clue where to start. Can anybody show me a working example or point me to the correct direction.

//EDIT Found a solution here, with overwriting css: Change cell height

Answer 1

change your editor Input style like this:

add this in your css, your css must be last css in your code. this is depend on your ag-grid theme, this sample work with ag-theme-balham theme class, then if you want to change theme, you have to change this line:

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

then use this:

<Input
   style={{position:"absolute", width: "100%", height: "100%"}}
   onBlur={onBlurcheckInput}
   onChange={(e: any) => onchangeCheck(e)}
   value={value}
   type="number"
/>

or change to this:

<div style={{height: "100%", position:"absolute"}}>
   <Input
      style={{width: "100%", height: "100%"}}
      onBlur={onBlurcheckInput}
      onChange={(e: any) => onchangeCheck(e)}
      value={value}
      type="number"
   />
</div>

sample-double click Age field and see height : DEMO

> Just sample and no real editor