Ag Grid react dropdown not showing outside grid

Question

Using typeahead as cell editor for search, and in rows, and adding.

The problem is, when applying the typeahead for options, will show only inside the table.

I tried overflow: visible and it works that way

actions-button-cell:has(.MultiColumn) {
  overflow: visible;
}

.ag-cel:has(.MultiColumn)l {
  overflow: visible;
}

.ag-row:has(.MultiColumn) {
  z-index: 0;
}

.ag-row.ag-row-focus:has(.MultiColumn) {
  z-index: 1;
}


.ag-root:has(.MultiColumn),
.ag-root-wrapper:has(.MultiColumn),
.ag-body-viewport:has(.MultiColumn),
.ag-body-viewport-wrapper:has(.MultiColumn),
.ag-center-cols-clipper:has(.MultiColumn),
.ag-center-cols-viewport:has(.MultiColumn) {
  overflow: visible !important;
} 

In css this will show the options without hiding but the scroll from the aggrid row is gone cuz of overflow:visible.

Is there a way to show the dropdown options outside of aggrid without removing the scroll

Any help will be appreciated

sandbox link: https://codesandbox.io/s/v1cqbz

Answer 1

for aggrid columndef in the field you want to add cellEditorPopup: true it will make the full typeahead and dropdown option come on top .

columnDefs= [{field:"name",cellEditorPopup: true,cellEditor:"editorname"}]

Answer 2

One solution to this problem could be to change the position of the typeahead dropdown menu to be absolutely positioned, rather than being inside the table.

This way, the dropdown menu can be displayed outside of the table's overflow boundaries.

You can do this by adding the following CSS to your code:

.typeahead-dropdown {
  position: absolute;
  z-index: 2; /* make sure it is above the table */
}

You also might want to adjust the position of the dropdown menu by setting the top and left properties, to make sure it is positioned correctly in relation to the input field.