Primefaces ConfirmDialog不是以ajax更新的形式垂直居中 [英] Primefaces ConfirmDialog not vertically centered in form updated with ajax

问题描述

我有一个通过Ajax +增长的表单，当点击某些操作时呈现。问题是，当表单增长时，我的p：confirmDialog不是垂直居中。

我已经尝试过了：

• 删除或添加appendToBody属性


• 更改页面中声明的位置（在h：form之前和之后） >覆盖CSS中的Top
  

这是Primefaces（当前使用v4）的问题还是我做错了什么？由于我使用了很多渲染属性，我应该重新渲染对话框吗？

这里是我的代码片段。

 < h：form id =myForm> 
< p：fieldset legend =Hello> 
 <！ - 这里有很多东西 - > 
< / p：fieldset> 
< p：spacer height =20px/> 
< p：fieldset legend =Dashboard
 id =thisOneMakesTheFormGrows
 rendered =＃{bean.include or bean.edit}> 
<！ - 这个有很多项目，当'rendered'属性为true时，页面会增长 - > 
< / p：fieldset> 
< / h：表格> 
 
< p：confirmDialog global =true
 id =meuConfirmDlg
 appendToBody =true
 showEffect =fade
 width =500px
 hideEffect =fade
 widgetVar =confirmDlg
 closable =false> 
  < / p：confirmDialog> 
  

解决方案

您是否覆盖了对话框的TOP属性百分比？如果不是，请覆盖对话框div的css。

  #dialogBoxId {
 top：50％！important; 
剩下：50％！重要; 
} 
  

I have a form that "grows" through Ajax+Rendered when some operations are clicked. The problem is that my p:confirmDialog is not vertically centered when the form grows. When in "normal size", the dialog is correctly centered.

I have already tried:

• Remove or add "appendToBody" attribute
• Change the position of the declaration in the page (before and after h:form)
• Overwrite the "Top" in CSS

Is that an issue from Primefaces (currently using v4) or am I doing something wrong? Since I use lots of "rendered" attributes, should I "rerender" the dialog?

Here follows a snippet of my code.

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

解决方案

Have you overwritten the TOP attribute of the dialog box by percentage? If not please overwrite the css of the dialog box div.

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

这篇关于Primefaces ConfirmDialog不是以ajax更新的形式垂直居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！