2014-11-04 107 views
1

我有一个通过Ajax +“增长”的表单,当点击某些操作时呈现。问题是,当表单增长时,我的p:confirmDialog不是垂直居中。当处于“正常大小”时,对话框正确居中。Primefaces ConfirmDialog不是以ajax更新的形式垂直居中

我已经尝试:

  • 删除或添加“appendToBody”属性
  • 更改申报的在页面的位置(前,后H:形式)
  • 覆盖“顶”在CSS

是从Primefaces(目前使用v4)的问题还是我做错了什么?由于我使用了大量的“渲染”属性,我应该“重新渲染”对话框吗?

下面是我的代码片段。

<h:form id="myForm">    
    <p:fieldset legend="Hello"> 
     <!-- lots of things here --> 
    </p:fieldset> 
    <p:spacer height="20px" /> 
    <p:fieldset legend="Dashboard" 
     id="thisOneMakesTheFormGrows" 
     rendered="#{bean.include or bean.edit}"> 
     <!-- this one has lots of items, making the page grow when the 'rendered' attribute is true --> 
    </p:fieldset> 
</h:form>   

<p:confirmDialog global="true" 
    id="meuConfirmDlg" 
    appendToBody="true" 
    showEffect="fade" 
    width="500px" 
    hideEffect="fade" 
    widgetVar="confirmDlg" 
    closable="false"> 
    <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" /> 
    <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" /> 
</p:confirmDialog> 

回答

1

你是否用百分比覆盖了对话框的TOP属性?如果不是,请覆盖对话框div的css。

#dialogBoxId{ 
top: 50% !important; 
left:50% !important; 
} 
+0

就是这样!只需要移除“left”属性,因为它在屏幕的右侧显示了对话框。 – 2014-11-27 10:16:24