ag-Grid (angular) Floating Filter contains Bootstrap dropdown menu

Question

I have a Bootstrap dropDownMenu displayed in CELL and in FLOATING FILTER in ag agid table,

the broblème is when dropDonwMenu is triggered, the menu is hidden in cell, like in the picture.

I solved this broblème for the CELL by adding:

• suppressRowTransform: true for the gridOptions
• cellStyle: { overflow: 'visible' } for the columnDefs

Like indicated in this post ag-Grid cell containing Bootstrap dropdown menu clips menu:

but, I can't solve this for the Floating Filter,

you can see the sample in stackblitz

Thanks for any suggestions you have!

Answer 1

You can instruct ng-bootstrap to append dropdown menus to the body element instead of the parent:

<div class="btn-group" ngbDropdown container="body">

StackBlitz