I'm trying to build a drop down menu within a grid cell and can't get it to display fully because of the multiple parent div that have overflow:hidden. I'm using the render of an html column to create a button and a div with position:absolute for the menu. The button click shows/hides the menu div.
I originally tried this with the bootstrap dropdown but it has the same problem plus it's doing something strange with the positioning of the dropdown menu in that the css translate position is completely wrong so isn't showing because of that. I would prefer to use the bootstrap dropdown if both of these problems can be fixed.
I also considered having one menu div on the page so it is outside the grid and then moving it to the button position within the grid cell with javascript. But I'm using the grid with Angular and hooking up the menu items <a> tags click events to Angular component methods on the column postRender. This came about because I only had a couple icon buttons in a cell that I was hooking up the click events on. But now have too many buttons and want to change it to a drop down menu.
Is there some way to display the drop menu within the grid and get around the parent div overflow:hidden? I did also try style: { 'overflow': 'visible' } on the column model but that only sets it at the cell level and there are still parent div with overflow:hidden. Also not sure what that does to the grid function by making that change.
Maybe I should be asking what is the best way to make a drop down menu for a grid row and be able to hook up the menu items to different methods of my Angular component and also passing row data into the methods.
