PrimeFaces p:dialog 与 p:schedule 组合时未居中

Question

版本： PrimeFaces 5.2

我有： 一个页面，上面有几个对话框，单击 docker-图标时会调用这些对话框。它适用于所有对话框，但包含 <p:schedule>

的对话框

会发生什么：单击 docker-图标时，会出现带有 <p:schedule> 的 <p:dialog>。

位置粘在屏幕的右边缘。
我可以垂直移动它
当我水平移动它时，它只会水平调整大小（=宽度增加）。对话框仍然粘在右边框上。
如果我最小化和取消最小化对话框，那么它会出现在屏幕的中心并且没有发现不良行为。

我尝试了什么： 我尝试使用 <p:dialog> <p:outputPanel> 和 <p:schedule> 提供的所有属性。唯一改变行为的是当我用不同的东西替换 <p:schedule> 时。然后对话框出现在屏幕中央。

相关代码：

<p:dialog 
    id="eventDialog"
    widgetVar="event"
    position="center"
    minimizable="true"
    maximizable="true">

    <p:outputPanel id="eventPanel">
        <ui:include src="/WEB-INF/pages/event.xhtml"/>
    </p:outputPanel>
</p:dialog>
[...]
//this is where the event-dialog is called from
<p:menuitem value="Events" icon="#{resource['images/Arrows-icon.png']}" onclick="PF('event').show()"/>

event.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:p="http://primefaces.org/ui"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:pe="http://primefaces.org/ui/extensions"
            xmlns:bnu="http://bootsfaces.net/ui">

    <p:schedule id="schedule" value="#{scheduleView.model}" widgetVar="myschedule" timeZone="GMT+2"/>

</ui:composition>

ScheduleView.java

import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
import org.primefaces.model.DefaultScheduleModel;
import org.primefaces.model.ScheduleModel;

@Named
@ViewScoped
public class ScheduleView implements Serializable{

    private ScheduleModel model;

    @PostConstruct
    public void init(){
        model = new DefaultScheduleModel();
    }

    public ScheduleModel getModel() {
        return model;
    }

    public void setModel(ScheduleModel model) {
        this.model = model;
    }
}

问题：是否有避免这种行为的解决方案？我希望对话框在未最小化后完全按照它的方式显示。我可以自己调用 minimize/unminimize 函数吗？

谢谢

Answer 1

Can I somehow call the minimize/unminimize function myself

根据文档，那里没有定义 javascript api，但可能有一个 function/method 在引擎盖下（检查 dialog.js 源代码） .

这是因为对话框在显示时会尝试根据其子项（在本例中为时间表）来定义其大小，但失败了。

Is there a solution to avoid this behavior ?

一个解决方案是给对话框一个固定的高度

Answer 2

解决方法： 除了不使对话框居中之外，它消除了所有不需要的行为。

<p:dialog 
id="eventDialog"
widgetVar="event"
position="center"
minimizable="true"
maximizable="true"
onshow="PF('event').toggleMaximize(); PF('event').toggleMaximize();>

<p:outputPanel id="eventPanel">
    <ui:include src="/WEB-INF/pages/event.xhtml"/>
</p:outputPanel>

解决方案：设置高度和宽度，对话框居中并正常运行。

<p:dialog id="eventDialog"
                  widgetVar="event"
                  position="center"
                  minimizable="true"
                  maximizable="true"
                  height="470" width="600">

PrimeFaces p:dialog 与 p:schedule 组合时未居中

PrimeFaces p:dialog is not centered when combined with p:schedule

primefaces