Primefaces 8.0 Calendar popup within Dialog is positioned relative to parent screen scroll position

Question

I have recreated a minimal reproducible example for the following question p:calendar popup remain below from calendar input in dialog when scroll (on IE and Chrome). I have also been encountering this issue and just figured out what was happening but I do not know how to fix it. The appendTo suggestion in the referenced question for selectOneMenu does not seem to be an attribute we can apply to the calendar.

Here is how to reproduce:

If the parent window is scrolled to the top, the calendar popup on the dialog is positioned correctly
If the parent window is scrolled down a little, the calendar popup on the dialog is positioned a little further down from the input box
The distance offset is seems relative to the amount the parent window is scrolled.
the top value seems to be the culprit.

<?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:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui" xmlns:pe="http://primefaces.org/ui/extensions" xmlns:o="http://omnifaces.org/ui" xmlns:of="http://omnifaces.org/functions">

<h:head>
    <title>Calendar</title>
</h:head>

<h:body>

    <h1>Calendar Popup Issue PF 8.0</h1>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <h:panelGrid id="gridId">
        <h:panelGrid id="panelId">
            <h:form id="laborForm">
                <p:commandButton oncomplete="PF('dialogWv').show()" title="Click to open dialog" update="dialogId" value="Open dialog with popup time only calendar" />
            </h:form>
        </h:panelGrid>
    </h:panelGrid>

    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />



    <p:dialog id="dialogId" header="Test" dynamic="true" widgetVar="dialogWv" modal="true" showEffect="fade" hideEffect="fade"
        resizable="true" width="400px" height="100px">
        <h:form id="formId">
            <p:panelGrid style="margin-bottom: 5px; border: 2px; width: 100%;" id="pg1">
                <p:row>
                    <p:column colspan="2">
                        <p:calendar  value="#{cc.attrs.viewBean.backfitTime}" timeOnly="true" pattern="HH:mm" showMillisec="false" showSecond="false" required="true"
                            requiredMessage="Time is required" rendered="true" />
                    </p:column>
                </p:row>
            </p:panelGrid>
            <br />
        </h:form>
    </p:dialog>




</h:body>
</html>

EDIT I am unable upgrade to PF10 at the moment due to too much of my site's look and feel getting broke with 10. So my short term fix was just to use the datePicker but with PF8. But the datePicker with PF8 doesn't render nice. Plus the mouse pointer covers the hour and minute numbers when incrementing up.

Clicking an up or down arrow is inefficient.

this is fixed in PF 10.0.0.RC1 or higher. I fixed this. See: https://github.com/primefaces/primefaces/issues/6583 — Melloware, Feb 18 '21 at 12:22
By the way, please don't chameleonize your question into a new question. If you have a new question, please post a new question. — Jasper de Vries, Feb 20 '21 at 14:08

score 2 · Accepted Answer · answered Feb 18 '21 at 12:23

2

This is fixed in PrimeFaces 10.0.0RC1 or higher.

Issue: https://github.com/primefaces/primefaces/issues/6583

answered Feb 18 '21 at 12:23

Melloware

10,435
2
32
62

OK. I actually did try 10 when it first came out but reverted back to 8 because it really changed the look of my site. I wasn't ready to adjust my theme at the time. But I also now want to pick up your fix to the other bug I had found https://stackoverflow.com/a/64821946/358794 so I guess I will upgrade back to 10. – jeff Feb 18 '21 at 16:12
Yeah the themes are changing in 10 so if you use a premium theme you may have to wait to get the new 10 version from PrimeTek. – Melloware Feb 18 '21 at 18:27
No custom theme, I never specified one in Web.xml, but made tweaks using style or styleClass or i.e. used icon="ui-icon-circle-arrow-e" on my commandButton. I think the icons I used are probably deprecated as they are not showing. Also disabled buttons in 10 don't look disabled. datatable groupBy looks to have changed as I am now getting serlvet error. This is why I reverted back to 8. I should probably post another question about v10 rather than cram it into this comment. Not complaining or ungrateful, PF is awesome, just need bite the bullet and update my site. – jeff Feb 19 '21 at 17:15

Jasper de Vries · Answer 2 · 2021-02-18T16:32:07.153

1

You should use p:datePicker instead of p:calendar. DatePicker is designed to replace the old p:calendar component. The p:datePicker (at least the one in PrimeFaces 10) uses absolute positioning instead of fixed, so that should solve your problem.

Primefaces 8.0 Calendar popup within Dialog is positioned relative to parent screen scroll position

2 Answers2