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

Have you tried the `positionFixed` prop on the Typeahead? That should allow the menu to render outside of the container. See: https://ericgio.github.io/react-bootstrap-typeahead/#positioning — ericgio, Jan 20 '23 at 06:06
i tried on a fresh project it works for one layer of cell editing but not for the full scrollable rows — Cristo Ferrao, Jan 20 '23 at 10:14
Your sandbox doesn't seem to be working correctly for me; It's crashing the browser window. — ericgio, Jan 22 '23 at 06:50

Baljeetsingh Sucharia · Answer 1 · 2023-01-28T06:14:23.307

0

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.

edited Jan 28 '23 at 06:14

answered Jan 28 '23 at 06:07

Baljeetsingh Sucharia

1,990
1
19
37

did not work the scroll stopped working and the typeahead was not opening – Cristo Ferrao Jan 28 '23 at 06:12
@CristoFerrao try without pointer none - removed that from answer also - I realize its causing a problem – Baljeetsingh Sucharia Jan 28 '23 at 06:20
no doesn't work tried on https://codesandbox.io/s/v1cqbz?file=/src/App.css – Cristo Ferrao Jan 28 '23 at 06:45

Ag Grid react dropdown not showing outside grid

1 Answers1