Dialog not centered on window height, but on document height instead

UI Components for JSF
Post Reply
barbarab
Posts: 6
Joined: 01 Jun 2017, 10:23

27 Jun 2018, 09:48

Using Primefaces 6.2.0 with Mojarra 2.3.3 on EAP 7.0.0.

When using simple dialog with a very big page the dialog is not centered on the viewport, but on the document instead, which could cause the dialog to fall off screen.

I experienced this issue already when using 6.0 so I thought it was time to investigate. When the content height of the page (the document) is larger then the window (the viewport of the browser), then you can clearly see that instead of centering on the window, the dialog is centered on the document. When having very large pages, the dialog is still centered on the page level, and not on the window level. It means that if the page is at least twice as high as the window, the dialog falls of the window. To test this i made a sample page:

Code: Select all

<html lang="nl" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui">
<h:head>

</h:head>

<h:body>

    <h:form id="show">
        <p:commandButton value="Test" onclick="PF('dialog').show();" />
    </h:form>

    <p:dialog id="dialog" header="dialog" widgetVar="dialog" modal="true" height="100">

        <h:form id="refresh">
            <p:button onclick="document.location.href = document.location.href;" value="Refresh" />
        </h:form>

    </p:dialog>

    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>

</h:body>
</html>
In this sample page, it will trigger the dialog. When using on most laptops, it will show dialog nicely in the center because the screen resolution is big enough. Now, resize the browser screen untill a scrollbar appears. It means some 'test' lines should fall off the window. Now trigger again the dialog. In my case it is not centered anymore. Resizing the browsers has also no effect...

The odd thing is, when testing this on the Primefaces showcase, and resizing the screen, the dialog is always centered! Conclusion is there is something different, but I only use base configuration for primefaces. I noticed though that everything is wrapped in layout container on the primefaces site. Also tried to wrap everything in a layout container, but it doesn't help.

Anybody has an idea why this happens. Is this a bug I should report? Is this as designed, and the dialog will ALWAYS center on the document (and for a strange reason the showcase doesn't follow this logic...).
Last edited by barbarab on 27 Jun 2018, 16:26, edited 1 time in total.

Melloware
Posts: 3717
Joined: 22 Apr 2013, 15:48

27 Jun 2018, 13:46

Have you tried the fittoviewport="true" option on the dialog?
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

barbarab
Posts: 6
Joined: 01 Jun 2017, 10:23

27 Jun 2018, 16:32

Melloware wrote:
27 Jun 2018, 13:46
Have you tried the fittoviewport="true" option on the dialog?
Yes, but no difference. Did you try my test page?

Melloware
Posts: 3717
Joined: 22 Apr 2013, 15:48

27 Jun 2018, 18:24

Ok no I did not try it was just having you test it. Can you please report this on the Github issues page please.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1


kukeltje
Expert Member
Posts: 9605
Joined: 17 Jun 2010, 13:34
Location: Netherlands

08 Oct 2018, 12:58

Have you tried 6.3-SNAPSHOT?

barbarab
Posts: 6
Joined: 01 Jun 2017, 10:23

16 Oct 2018, 14:01

I did but still the same issue.

I found the solution. Apparently, doctype declaration is needed in this case... <!DOCTYPE html>

Same issue like in broken datatables sometimes.

I hope the mandatory use of the doctype will be included in the documentation, since it caused a lot of troubles... Very difficult to think about the fact that a doctype declaration can have impact on how some components can render to different behavior....

I added more info to the github issue.

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 23 guests