Floating p:calendar when scrolling
<p>I am using PrimeFaces 5.0.5 with GlassFish server 3.1.2.2.</p>

<p>I added <code>&lt;p:calendar&gt;</code> inside a <code>&lt;ui:fragment&gt;</code> which is then included in another XHTML page.</p>

<p>When I open the select menu and scroll with the mouse wheel, the panel will float with the page.</p>

<p>I've already checked <a href="https://stackoverflow.com/questions/26228872/pselectonemenu-dropdown-part-scrolls-and-does-not-stay-in-position">this question</a> with a similar issue but not on the same component.</p>

<p>The same trick doesnt work for calendar. I've tried appending it to components around but none of them works.</p>

<p>Any feedback and comment are appreciated.</p>

<p>Many thanks.</p>

<pre><code>&lt;h:panelGrid columns="2"  id="..." style="margin: 0px 0px 30px 15px;"&gt;
    &lt;h:outputText value="#{msg['startDate']}:"/&gt;
        &lt;p:calendar
            pattern="dd-MM-yyyy"
            converterMessage="#{msg['ocs.invalidStartDateFormat']}"
            value="#{cc.attrs.inputObject.usageHistoryStartDate}"
            disabled="#{cc.attrs.inputObject.usageHistoryBillingPeriodOption != 'CUSTOM_DATE_RANGE'}"
            showOn="button"&gt;
        &lt;/p:calendar&gt;
    &lt;h:outputText value="#{msg['endDate']}:" /&gt;
        &lt;p:calendar
            pattern="dd-MM-yyyy"
            converterMessage="#{msg['invalidEndDateFormat']}"
            value="#{...}"
            disabled="#{...}"
            showOn="button"&gt;
        &lt;/p:calendar&gt;
&lt;/h:panelGrid&gt;
</code></pre>

<p><a href="https://i.stack.imgur.com/qL323.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qL323.png" alt="Issue screenshot"></a></p>