Dialog z-index issue

UI Components for Vue
Post Reply
tsharish
Posts: 3
Joined: 02 Feb 2022, 23:16

10 May 2022, 06:06

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:

Image

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
Posts: 3
Joined: 02 Feb 2022, 23:16

13 May 2022, 22:24

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.

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests