如何更改 primefaces p:confirmDialog 位置

Question

我需要更改从确认到显示 confirmDialog 的顶部的距离，因为我在 iframe 中使用此 xhtml。

我尝试更改我的 CSS，但没有用。

<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>

Answer 1

由于对话框 HTML 是使用内联样式属性生成的，因此您需要在 CSS 属性值中使用 !important。

例如，我的对话框是这样生成的：

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

您可以在 CSS 中覆盖它，例如：

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

请注意，这是所有确认对话框的通用规则。您可能想要使用特定的 class 或 ID。

另请参阅：

What does !important mean in CSS?

如何更改 primefaces p:confirmDialog 位置

How to change primefaces p:confirmDialog position

css

primefaces