Struggling to integrate a bootstrap-4 dropdown menu with AgGrid, I'm facing an issue where the data table overlaps the dropdown when the html is present. Attempts to increase the z-index have not yielded results.
Below is the html code snippet:
<div class="dropdown">
<button class="btn btn-sm dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Add loan</button>
<button class="dropdown-item" type="button">Add saving</button>
<button class="dropdown-item" type="button">Add currency</button>
<button class="dropdown-item" type="button">Add share</button>
</div>
</div>
And here's the corresponding AgGrid code:
columnDefs={headerName: 'Action',
field: 'actionElement',
colId: 'params',
cellStyle: {overflow: 'visible';},
cellRendererFramework: DropDownComponent}
];