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?

score 12 · Answer 1 · answered Oct 16 '18 at 18:12

12

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

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

answered Oct 16 '18 at 18:12

Dan Obregon

941
9
22

score 2 · Accepted Answer · answered Sep 11 '17 at 11:08

2

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.

answered Sep 11 '17 at 11:08

Seeschorle

376
1
4
18

You mean ".ag-body-viewport.ag-layout-normal". NO, not working. – Sudhir Kaushik Sep 04 '19 at 09:21

score 2 · Answer 3 · answered Apr 28 '21 at 05:53

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}

answered Apr 28 '21 at 05:53

Harshit Pant

1,032
11
14

ag-grid context menu is cut off (clipped)

3 Answers3