How to change primefaces p:confirmDialog position

Question

I need change the distance from my confirm to top where my confirmDialog is showed, because i use this xhtml inside a iframe.

I tried change my CSS, but is not working.

<p:confirmDialog global="true" showEffect="fade" hideEffect="fade" appendTo="@(body)" 
    width="350">
        <p:commandButton value="Não" type="button"
            styleClass="ui-confirmdialog-no ui-button-flat" />
        <p:commandButton value="Sim" type="button"
            styleClass="ui-confirmdialog-yes" />
</p:confirmDialog>

score 1 · Accepted Answer · answered Feb 19 '21 at 09:49

As the dialog HTML is generated with an inline style attribute, you need to use !important in your CSS property values.

For example, this is how my dialog is generated:

<div style="width: auto; height: auto; visibility: visible; left: 539.203px; top: 130.5px; z-index: 1004; display: block;" ...>

You can override that in CSS like:

.ui-confirm-dialog {
  top: 10px !important;
}

Note that this is a generic rule for all confirm dialogs. You might want to use a specific class or id.

How to change primefaces p:confirmDialog position

1 Answers1