Angular5 PrimeNG Datatable on a Modal with ContextMenu showing up behind the modal

1
votes

enter image description here

I have a modal window that contains a PrimeNG Datatable enabled with ContextMenu. The problem is that when I right click one of the table rows, my right click context menu is behind the modal window. I've added appendTo="body" but that did not help except for correct positioning. The main problem now is that the context menu has a z-index that is BEHIND the modal.

I have tried explicitly setting the z-index but could not override the dynamically generated CSS that is applied to the context menu with every right click.

Any ideas, please?

1
cssangularangular5contextmenuprimeng
Try adding baseZIndex for the context-menu which is greater than the modal and setting [autoZIndex]="false" i haven't try it but i hope it works – Hana Wujira

1 Answers

1
votes

You can set the base z-index property of the context menu.

<p-contextMenu #cm [model]="items" appendTo="body" baseZIndex="99999"></p-contextMenu>

here is stackblitz implementation