I've been struggling with an issue for quite a while now, which is having a pop-up menu for each row in the grid. The problem is the pop-up menu is being clipped by the grid (e.g. for the last row, the menu would go under the grid and not be accessible).
I found a similar post here and tried to adapt it:
https://ko.infragistics.com/community/forums/f/ignite-ui-for-javascript/96817/drop-down-menu-button-in-grid-row
What is confusing is why the igCombo works fine, while the pop-up menu (popr-box) goes under the grid.
I've attached the adapted example. Any help on that would be much appreciated.
dropDownTemplate_Adapted.rar
Thank you very much for your help, Maya. This clarifies my confusion and gives me a good alternative at the same time.
Hello Alexandru,
Thank you for posting in our forum.
The difference is in where the actual elements are rendered in the DOM and how they are positioned.
If you open the generated html and take a look you’ll see that the drop-down’s element list is rendered outside the grid container (in the body) and is absolutely positioned when you open it, hence it does not affect the grid content and will always render over the grid, while the popup is rendered directly inside the grid cell (td) hence it will overflow it’s container and you would have to scroll down to see it.
You can use the igPopover component (https://www.igniteui.com/popover/basic-popover) , which is similar to your popover, however it attached by default to the DOM body so it will appear over the grid (like the drop-down).
I’ve attached a sample for your reference. Let me know if that solves your issue.
6327.dropDownTemplate_Adapted_withPopover.rar
Regards,
Maya Kirova