Wrong dialog positioning when dynamic="true"

pitupitu · 22 Nov 2011, 23:50

Hi, I'm using Dialog component with attributes dynamic = "true" and position = "center". The problem is that the left upper corner of dialog
is centered on the screen instead content. It doesn't look good, whole dialog is shifted right and down from the center. When set dynamic = "false", everything works fine. Is it a bug or feature?

Used:
PrimeFacesM4, mojarra 2.1.4, tomcat7

smithh032772 · 23 Nov 2011, 01:40

Can you copy/paste your xhtml file here?

pitupitu · 23 Nov 2011, 10:39

Here is the test code. Pressing 1st and 3rd button should place the dialog in the same location. But it does not.
This is disadvantage, that makes dialog dynamic loading feature is not as powerfull as it could be.

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <f:view contentType="text/html">
        <h:head>
            <title>Dialog test</title>
        </h:head>
        <h:body>
            <p:commandButton value="Dynamic: false, width not specified" onclick="dyn_false.show()" type="button"/> 
            <p:commandButton value="Dynamic: true, width specified" onclick="dyn_true_width.show()" type="button"/>
            <p:commandButton value="Dynamic: true, width not specified" onclick="dyn_true.show()" type="button"/>
            <h:form>
                <p:dialog header="Dynamic: false" widgetVar="dyn_false" position="center" dynamic="false">
                    Lorem ipsum dolor sit amet enim. Etiam ullamcorper.<br/>Suspendisse a pellentesque dui, non felis. <br/> 
                    Maecenas malesuada elit lectus felis, malesuada ultricies.<br/>Curabitur et ligula. Ut molestie a, ultricies porta urna. <br/> 
                    Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.<br/> 
                </p:dialog>
                <p:dialog header="Dynamic: true, width specified" widgetVar="dyn_true_width" position="center" dynamic="true" width="500">
                    Lorem ipsum dolor sit amet enim. Etiam ullamcorper.<br/>Suspendisse a pellentesque dui, non felis. <br/>
                    Maecenas malesuada elit lectus felis, malesuada ultricies.<br/>Curabitur et ligula. Ut molestie a, ultricies porta urna. <br/>
                    Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.<br/> 
                </p:dialog>
                <p:dialog header="Dynamic: true, width not specified" widgetVar="dyn_true" position="center" dynamic="true">
                    Lorem ipsum dolor sit amet enim. Etiam ullamcorper.<br/>Suspendisse a pellentesque dui, non felis. <br/>
                    Maecenas malesuada elit lectus felis, malesuada ultricies.<br/>Curabitur et ligula. Ut molestie a, ultricies porta urna. <br/>
                    Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis.<br/>
                </p:dialog>                
            </h:form>
        </h:body>
    </f:view>
</html>

smithh032772 · 23 Nov 2011, 22:54

Why don't you add hide() javascript to the buttons as follows (to hide the other dialogs prior to showing the dialog)?

Code: Select all

            <p:commandButton value="Dynamic: false, width not specified" onclick="dyn_true_width.hide();dyn_true.hide();dyn_false.show()" type="button"/> 
            <p:commandButton value="Dynamic: true, width specified" onclick="dyn_true.hide();dyn_false.hide();dyn_true_width.show()" type="button"/>
            <p:commandButton value="Dynamic: true, width not specified" onclick="dyn_false.hide();dyn_false.hide();dyn_true.show()" type="button"/>

pitupitu · 24 Nov 2011, 18:26

Why? Because it doesn't matter. Dialog is placed in wrong place. This is the clue of my initial post.

smithh032772 · 25 Nov 2011, 05:48

If you want response from PrimeFaces team, then submit a bug request.

RueKow · 02 Dec 2011, 08:21

Hi pitupitu,
I have the same problem. I must enable lazy loading for my dialogs with "dynamic"-attribute, but dialogs will not be centered.

@PrimeFaces Team: Should I open an issue for that?

Greets Rüdiger

leventgny · 02 Dec 2011, 09:51

Try with giving startup dimensions;

Code: Select all

<p:dialog width="300" height="300" >
...

Then, we'll discuss into this issue while 3.0RC labs.

02 Dec 2011, 10:05

Reason is, initial position is calculated on load, for lazy dialogs this causes a problem since position is calculated without knowing the dialog content size. Feel free to create an issue ticket as an enhancement.

RueKow · 02 Dec 2011, 11:56

Hi ironhide,
I tried with startup dimensions and finally it works. Thanks a lot for your advice.

Wrong dialog positioning when dynamic="true"

Who is online