CODEWITHSUNDEEP
javascriptcssjsfprimefaces
Rajat Gupta
Rajat Gupta

Reputation: 26587

Primefaces dialog with modal=true not working properly

I am unable to achieve a (primefaces)dialog box with attribute modal=true. It works correctly with modal=false, but when I try to set modal=true, even the dialog box overlay becomes inactive.

How can I make it work properly ?

Upvotes: 21

Views: 36463

Answers (4)

Abhishek Dhote
Abhishek Dhote

Reputation: 1648

With Primefaces 5 appendTo="@(body)" fixed the issue for me.

Upvotes: 20

Gunjan Kalra
Gunjan Kalra

Reputation: 437

appendToBody=true causes the problems associated with nested forms - the input texts values as entered at the dialog are ignore and ajax requests do not go through until the dialog gets its own non-nested form. Even without modal=true the appentToBody=true causes this behavior.

Upvotes: 3

Corneil du Plessis
Corneil du Plessis

Reputation: 1043

I have also struggled with strange behaviour until I moved the p:dialog into a separate h:form at which point the data in the dialog matched the row from the dataTable but the overlay was not hiding.

appendToBody=true solved the problem with the overlay. I still need to test dialogs with inputs and actions.

Upvotes: 9

maple_shaft
maple_shaft

Reputation: 10463

Per the Primefaces Guide 2.2 on the Dialog section:

appendToBody FALSE Boolean Appends dialog as a child of document body.

When using the Primefaces dialog utilize the appendToBody attribute to enable the dialog overlay to be found. The Primefaces dialog is based on the YUI dialog component which has a similar issue for modal dialog overlays.

Manipulating the dialog overlay will involve overriding the CSS class of the overlay and specifying your own opacity.

Upvotes: 12

Related Questions