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.

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.

Answer 1

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);