Search code examples
jsf-2primefaces

Primefaces's dialog 'appendTo' property, what it useful for?

Maybe it's a dumb question, but in Primefaces's <p:dialog> there's property which called appendTo which described in manual as:

Appends the dialog to the element defined by the given search expression.

I can't realize what it useful for?

Solution

  • From the PrimeFaces User Guide (currently p. 185):

    Do not place dialog inside tables, containers likes divs with relative positioning or with nonvisible overflow defined, in cases like these functionality might be broken. This is not a limitation but a result of DOM model. For example dialog inside a layout unit, tabview, accordion are a couple of examples. Same applies to confirmDialog as well.

    You can overcome this by using appendTo="@(body)" and your dialog will be attached as a child of the <body> node.

    One of the main dialog option is modal and you could quickly end up with your dialog behind the overlay if you are not using appendTo as shown below:

    enter image description here

    See also http://forum.primefaces.org/viewtopic.php?f=3&t=16504

    Notes:

    • Before PrimeFaces 5.0, the attribute to set was appendToBody="true". This was changed for 5.0.
    • If your dialog contains some buttons don't forget to surround them by <h:form> (see Proper Construct for Primefaces Dialog)