Problem with primefaces calendar in dialog component

Question

Hi there I've been looking for a solution to this problem for a while now but can't seem to find a fix for it. Hopefully one of you can help me out.

I've a primefaces(v6.2, omega theme) calendar component(pop-up, not inline) inside a dialog component. When opening the dialog and clicking on the calendar input field the calendar pop up shows up. What I would like it to do is have it pop up next to the input field(pretty much its regular behaviour outside of a dialog). The issue I'm facing however is that when I scroll down the page and click on the input component the pop up will show but with a certain offset in relation to the input field. The following screenshots illustrate the issue.

first pic

second pic

Here's my code:

<p:dialog id="dialog"
          widgetVar="dialog"
          modal="true">
    <p:panel id="panel">
        <p:outputPanel id="outputPanel">
            <p:panelGrid columns="2" layout="grid"
                         columnClasses="ui-grid-col-3, ui-grid-col-4"
                         styleClass="ui-noborder" width="100%">
                <p:outputLabel for="date" value="#{msg.date}"/>
                <p:calendar id="date" value="#{date}"
                            navigator="true" mask="true" pattern="dd/MM/yyyy"/>
            </p:panelGrid>
        </p:outputPanel>
    </p:panel>
....
</p:dialog>

I'm not that good with CSS so hopefully this is an easy fix but sadly enough I can't figure it out myself.

Oops forgot to add that, thanks for pointing that out I've edited my question and added the version. I'm using version 6.2(omega theme) — JDVB
I am facing the same problem on PF6.0. I found this issue and it looks like the PF guys have the fix planned for PF7.0. Did you happen to find a fix since posting? — Mitchell Brooks
I've not i just kept it as is for now and might just ditch the calendar pop up altogether in this particular case. Thanks for the heads up though I plan on migrating to 6.3 as soon as it is available i need some additional fixes that are to be included in that version. — JDVB

Joey Abano Joey Abano · Accepted Answer · 2021-03-10T01:36:17

This issue is not yet fixed as per March 2021

https://github.com/primefaces/primefaces/issues/3868
https://github.com/primefaces/primefaces/issues/5740
https://github.com/primefaces/primefaces/issues/6583

As a work around for my case I put the

<p:dialog blockScroll="true">

ensure that the button triggering the dialog to have

window.scrollTo(0,0);

Problem with primefaces calendar in dialog component

1 Answers