scrollable number inputfield in aggrid vanilla JS NumericCellEditor

Xyz753 0
Viewed 11

I'm using the NumericCellEditor from this documentation. Everything works fine except one little thing. https://www.ag-grid.com/javascript-data-grid/cell-editors/

I'd like that the inputfields which are rendered in the grid have vertical scrollbars like in standard html like here: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number

I tried many things but it doesn't work. My tweak in the code is this:

   class NumericCellEditor {
    // gets called once before the renderer is used
    init(params) {
       // create the cell
       this.eInput = document.createElement('input');
       this.eInput.className = 'simple-input-editor';
       this.eInput.type="number";
       this.eInput.step=1;
       this.eInput.min=1;
       this.eInput.max=10;
       console.log(this.eInput);
       ...
  }

All parameters are set and logged in the console but the scrollbars are not shown like in plain html. I also have tried cell renderers but the problem persists. Any ideas?

ag-grid javascript
1 Answers
  init(params) {
    this.eInput = document.createElement('input');
    this.eInput.type = 'number';
    this.eInput.style["height"] = '2.25rem';
    this.eInput.style["overflow"] = 'visible';
    this.eInput.style["width"] = '100%';

After some struggle, this did it for me. Overflow has been set to hidden. You can do this or create a css class and add it to your column defs using the option "cellClass".

Xyz7530
Related