11

enter image description here

I checked the z-index, but the Dialog z-index is higher than the div of overlay. It was to be correct.

In the showcase works correctly.

Could you help me with this problem?

Rafael Orágio
  • 1,718
  • 5
  • 19
  • 26

2 Answers2

21

Set appendToBody = true and your problem will go away - but be careful to have a form inside if you do some server-side processing. More info when you post more info!

spauny
  • 4,976
  • 9
  • 44
  • 61
  • Very nice spauny. Solved my problem! Thank you very much. – Rafael Orágio Dec 09 '11 at 11:33
  • I'm sorry, I had forgotten. Thanks more one time! – Rafael Orágio Dec 09 '11 at 16:04
  • I have the same problem, but I cannot use appendToBody="true", because the page containing the dialog can be loaded several times during session and each time it's loaded a new dialog with the same id is appended to the body. I still do not understand why the overlay happens, can I fix it using css? – Rahim Mammadli Nov 07 '14 at 06:47
  • @RahimMammadlee What do you mean? Why is it loaded multiple times? You can update only the output every time instead of updating the whole dialog. Post another question with your entire code and send me the link here, maybe I can help – spauny Nov 07 '14 at 11:52
  • 1
    Fixed it, the problem was that I didn't fully understand how z-index works. Explained very well here: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context – Rahim Mammadli Nov 07 '14 at 16:18
  • In following other post @sleske explains why appending to body might not be a good idea https://stackoverflow.com/a/33825528/5404186 – David Dal Busco Oct 17 '17 at 08:31
  • I had the same issue with PrimeNg's p-confirmDialog and p-dialog – Olivier Tonglet Jul 11 '18 at 13:41
15

For primefaces 5.1 you can use appendTo="@(body)"

Fredy Bello
  • 411
  • 4
  • 5