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

Question

Version: PrimeFaces 5.2

What I have: A page on which there are several dialog's which are called when the docker-icon is clicked. It works with all dialog's but the one which contains the <p:schedule>

What happens: When the docker-icon is clicked, the <p:dialog> with the <p:schedule> appears.

• Position is glued to the right edge of the screen.
• I can move it vertically
• When I move it horizontally it is only resized horizontally (=width increases). The dialog remains being glued to the right border.
• If I minimize and unminimize the dialog then it appears centered on the screen and no undesirable behavior is found.

What have I tried: I have tried to play around with all attributes which are offered by <p:dialog> <p:outputPanel> and <p:schedule>. The only thing that changes the behavior is when I replace <p:schedule> with something different. Then the dialog appears centered in the screen.

Relevant Code:

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

Question: Is there a solution to avoid this behavior ? I want the dialog to appear exactly the way it does after it is unminimized. Can I somehow call the minimize/unminimize function myself ?

Thank You

Answer 1

Can I somehow call the minimize/unminimize function myself

Not according to the docs there is no javascript api defined in ther, but there might be a function/method under the hood (check the dialog.js sourcecode).

The reason for this is that the dialog, when showing, tries to define its size based on its children, the schedule in this case, and that fails.

Is there a solution to avoid this behavior ?

A solution is to give the dialog a fixed with and height