How to change primefaces p:confirmDialog position

user_15198200 0
Viewed 316

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>
primefaces css
1 Answers

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.

See also:

user_8806190
Related