How to change the position of confirmation box in jsf primefaces?

Question

I am using primefaces confirmation box in JSF. The dialog is getting pop up at the end of the page but i want it to get pop up at the center of the page. on checking with inspect element in browser I am getting below html code whcih shows the dilog box by default have inline CSS defined. I tried to give css to its class but its not working .

JSF Code :

<p:confirmDialog message= "Do you want to save your changes?"   showEffect="fade" widgetVar="Confirm" position="center"> 

<p:commandButton value="Yes" action="#{emdNew.save}" oncomplete="PF('Confirm').hide()" update=":form"/>

<p:commandButton value="No"  update="@form"  immediate="true" action="#{emdNew.no}" oncomplete="PF('Confirm').hide()" /> 

</p:confirmDialog>

Someone please help. Thanks in advance.

Answer 1

You can use the appendTo-attribute to define the element on which the <p:confirmDialog> should be centered. I would try using the following value:

<p:confirmDialog appendTo="body" ...></p:confirmDialog>

Another approach would be to override the default styling of the .ui-dialog class:

.ui-class {
   top: 50%;
   left: 50%;
}

Be careful to include your custom stylesheet after default PrimeFaces CSS.

I can't test this atm but I hope this helps you solve your issue. Have a look at the docs for further information.

Answer 2

If you use confirmDialog in form, you need to write like this;

/*This code for dialog component*/

#formID\:dialogID {
  left: 5% !important;
  top: 15% !important;
}

/*This code for confirmDialog component*/

.ui-dialog {
  left: 5% !important;
  top: 15% !important;
}

but be careful using .ui-dialog.