ag-grid context menu is cut off (clipped)

Question

Having a ag-grid (Angular component) of ag-grid v8.20 Unfortunately the context menu is clipped if it is bigger than the grid:

(screenshot should be here but I can't upload it, imgur bug?)

Is there a way to make the context menu display completely, without clipping?

Answer 1

It was clipped because of a CSS style I set on my component. In my case it was a flexbox with "overflow-y: auto". I had to remove that to make it work.

Answer 2

This is a general answer for people facing the same issue in react and typescript. This works for me.

popupParent={document.querySelector('body') || undefined}

Answer 3

If anyone else comes across this post, here is a plunker to demonstrate the fix.

var gridOptions = {
    ...
    popupParent: document.querySelector("body")
    ...
};