Solved: Dialog Framework options

[andyba]

I have recently been changing the way dialogs are used in a PrimeFaces based project so that the Dialog Framework is used.

So far everything has gone well with one rather glaring exception: there is no documentation about the options that can be set for them other than a rather vague "similar to the component attributes like modal, resizable etc." Apart from the fact that this kind of documentation always ends up being the last thing to be done, which is at worst frustrating, it means that I am unable to fulfil a requirement that all dialogs be positioned at the top of the page and centered horizontally. This is easily done using position="center top" with the p:dialog tag but only causes JavaScript errors when I try
The requirement stems from the fact that the app is often used on screens with 1024x640 resolution (tablets) and the dialogs extend down and to the left when they resize to fit content.

Code: Select all

        Map<String, Object> dialogOptions = new HashMap<>();
        dialogOptions.put("modal", Boolean.TRUE); // This works fine
        dialogOptions.put("position", "center top"); // This causes JavaScript to throw tantrums
        RequestContext.getCurrentInstance().openDialog(dialogOutcome, dialogOptions, null);

PrimeFaces version is 4.0.8, Glassfish and JSF version are irrelevant.

Is there any complete list of options and acceptable values around?
If not, how do I get the dialogs to be positioned top and centered?

Edit: User Guide gives the following as list of options: modal, resizable, draggable, width, height,contentWidth, contentHeight.
Looks like I am going to be grinding my teeth in frustration on this one as even 5.1 does not support the full range of options that the p:dialog does.

[andyba]

A pragmatic solution was easy to implement

Code: Select all

        <script type="text/javascript">
            function dialogTop(formId, buttonId) {
                var selector = $('#$1\\:$2_dlg'.replace('$1', formId).replace('$2', buttonId));
                if (selector.css('top') !== 'auto') {
                    $(selector).css({top: '0px'});
                } else {
                    setTimeout(function () {
                        dialogTop(formId, buttonId);
                    }, 50);
                }
            }
        </script>

which is executed...

Code: Select all

oncomplete="setTimeout(function () {dialogTop('regionsForm', 'newRegionCommand');}, 50);"

in the button which causes the dialog to be opened.
Note the use of setTimeout, this ensures that attempts are made to reposition the dialog until it is rendered and that the css top: value is != auto.

While this works it is obviously not ideal

- it is not proof against future versions of PrimeFaces
- it relies on css defaults

Do I need to create an issue about this so that the full range of options in normal dialogs are also available for the Dialog Framework or is this on the TODO list.
Obviously some options may not be practical to implement but this one surely is.

[emre]

Hi,
We are still observing the positioning issue with primefaces 6.0. Is anybody aware whether there is an improvement plan for Dialog Framework to support positioning similar to p:dialog component.

[Zardo]

I would also be interested in a nice solution for this issue

[andrewb]

I too would be interested in a solution for this issue.

[Reithi]

Hello
I am still waiting for a professional solution that the position of the dialog window can be passed as a parameter.
It would be nice if it were implemented in the next version.

PrimeFaces version is 6.1, GlassFish Server Open Source Edition 4.1.2

[videanuadrian]

Is there no "official" fix for that ? not even for Elite or PRO users ?

[kukeltje]

Elite users just get fixes somewhat sooner than normal CE users. Pro users can file an improvement request.

If there is no issue in the issuelist, the chance of it getting automagically fixed is not that high. So please file an issue in github.

But you can always download the source, try to create a fix, file a pull request and in that way contribute back to all the free work that is already done for you

[anabpz]

A pragmatic solution was easy to implement

Code: Select all

        <script type="text/javascript">
            function dialogTop(formId, buttonId) {
                var selector = $('#$1\\:$2_dlg'.replace('$1', formId).replace('$2', buttonId));
                if (selector.css('top') !== 'auto') {
                    $(selector).css({top: '0px'});
                } else {
                    setTimeout(function () {
                        dialogTop(formId, buttonId);
                    }, 50);
                }
            }
        </script>

which is executed...

Code: Select all

oncomplete="setTimeout(function () {dialogTop('regionsForm', 'newRegionCommand');}, 50);"

in the button which causes the dialog to be opened.
Note the use of setTimeout, this ensures that attempts are made to reposition the dialog until it is rendered and that the css top: value is != auto.

While this works it is obviously not ideal

- it is not proof against future versions of PrimeFaces
- it relies on css defaults

Do I need to create an issue about this so that the full range of options in normal dialogs are also available for the Dialog Framework or is this on the TODO list.
Obviously some options may not be practical to implement but this one surely is.

Hello, first of all, thanks for your solution. I've tested it but I'm not able to change top css property. I've experimented a strange behaviour. It seems that the value of top property changes in div that builds at runtime and wraps iframe of dialog framework, but when finally the dialog framework appears, it comes back to the same position in its origins.

My code:

Code: Select all

function dialogTop(formId, buttonId) {
	alert('Into dialogTop');
	
    var selector = $('#$1\\:$2_dlg'.replace('$1', formId).replace('$2', buttonId));
    alert(selector.css("top"));
    if (selector.css("top") !== "0px") {
    	selector.css("top", "0px");
    	alert(selector.css("top"));
    } else {
        setTimeout(function () {
            dialogTop(formId, buttonId);
        }, 50);
    }
}

first message I get with alert is: 587.861px
second message I get with alert is: 0px

And finally Dialog Framework (Code I've inspected on click F12 in Chrome browser):
Note: value of div in this capture is style="top: 267.556px; because of showing Chrome's Console, it moves slightly up the dialog some pixels.

Code: Select all

<div id="bfEditionForm:frmEPanel:frmESearch:btn_dlg" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow ui-hidden-container  ui-draggable ui-overlay-visible" data-pfdlgcid="c0161157-5036-4ef7-8841-f5286a5c3ea6" data-widgetvar="bfEditionForm_frmEPanel_frmESearch_btn_dlgwidget" style="top: 267.556px; width: auto; height: auto; left: 559px; visibility: visible; z-index: 1042; display: block;" role="dialog" aria-labelledby="bfEditionForm:frmEPanel:frmESearch:btn_dlg_title" aria-hidden="false" aria-live="polite">
  <div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top ui-draggable-handle">
      <span class="ui-dialog-title">Edit/New Item</span>
  </div>
  <div class="ui-dialog-content ui-widget-content ui-df-content" style="height: auto;">
      <iframe style="border: 0px none; width: 540px; height: 721px;" frameborder="0" src="/mywebsite/xhtml/test.jsf?" title="Edit/New Item"></iframe>
  </div>
</div>

What I am doing wrong?

I tried to do it in other way but I have been impossible for me. The options to add for Dialog Framework are very limited and there isn't nothing related to style property in ordert to change position or others.

Are any solution in Elite or Pro Elite Primefaces version? The most recently version I have tested is 6.1.4.