Dialog z-index issue

[tsharish]

Hi,

I am using PrimeVue 3.12 with PrimeFlex 3.1.3 and the Sakai Vue theme. I am facing an issue with the Dialog component that I am not able to resolve even after many attempts and hoping someone can help. When the size of the browser is minimized (after opening the developer tools for example), the z-index of the dialog is not set properly resulting in the side menu and top bar to also be active. Below is a screenshot of the issue:



What I've found so far is that the z-index of 1100 is failing to set for the dialog component once the browser window has been reduced but I am not sure why. I am not able to post the entire code at the moment but I would appreciate if anyone can point me in the right direction. Many thanks!

[tsharish]

I think I figured out the issue. I had added some tooltips to the buttons in the App Bar at the top which was messing up the values of the z-index. I removed the tooltips and the issue seems to have stopped. I will test the Sakai Vue theme separately to see why this is happening and raise a github issue if required. Hope this helps others who may run into the same issue.

[tugce.kucukoglu]

Could share with us a simple codesandbox link to replicate it?