Search code examples
htmlcssangulardialogprimeng

grid header will be hide in p-dialog during minimize the browser


Go to this primeng dialog box article

See this below image when I open the dialog box

enter image description here

But the problem is grid header will be hide during minimize the browser

enter image description here

I am using the dialog box all over into my application. Could you please anyone let me know how to fix this?


Solution

  • You need to override .ui-dialog { z-index: 1001;} inline z-index using !important as shown below:

    .ui-dialog {
     z-index: 9999!important;
    }
    

    This is because of id #layout-topbar z-index is bigger than ui-dialog so you need to override ui-dialog z-index using !important. hope this will help you.