CODEWITHSUNDEEP
primefaces
SklogW
SklogW

Reputation: 849

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

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.

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

Upvotes: 3

Views: 4365

Answers (2)

Kukeltje
Kukeltje

Reputation: 12336

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

Upvotes: 1

SklogW
SklogW

Reputation: 849

Workaround: It eleminates all undesired behavor, besides not centering the dialog.

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

Solution: Set height and width and the dialog is centered and behaves as it should.

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

Upvotes: 0

Related Questions