Problems with PrimeFaces's dialog component

dialog, java, jsf-2, primefaces

Solution

I've finally found the solution. To solve the problem, there are 2 things to do:

- Add the attribute `appendToBody="true"` to the dialog component.

- Bring the dialog out of the center `<p:layoutUnit>` and let it stand on its own outside `<p:layout>`.

One important thing to note is that if I add the attribute `style="z-index: 999 !important;"` to the dialog component, the dialog will appear normally. However, the text area will become unresponsive.

Problem

In my application, when the user clicks `Reply` to a comment, I will show a dialog for typing the message. Please see the picture below. As you can see, I have 2 problems with the dialog. - It is partially hidden by the `<p:layoutUnit>` on the right. - When I add the attribute `modal="true"` to the dialog, the dialog itself is also not accessible. I'd be very grateful if you could give me some advice on how to tackle these problems. Best regards,

Original source