java - float p :calendar when scrolling

Question

我正在使用 PrimeFaces 5.0.5 和 GlassFish 服务器 3.1.2.2。

我添加了<p:calendar>里面 <ui:fragment>然后将其包含在另一个 XHTML 页面中。

当我打开选择菜单并滚动鼠标滚轮时，面板将随页面 float 。

我已经检查过this question有类似的问题，但不是在同一个组件上。

同样的技巧不适用于日历。我尝试将其附加到周围的组件，但它们都不起作用。

欢迎任何反馈和评论。

非常感谢。

<h:panelGrid columns="2"  id="..." style="margin: 0px 0px 30px 15px;">
    <h:outputText value="#{msg['startDate']}:"/>
        <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">
        </p:calendar>
    <h:outputText value="#{msg['endDate']}:" />
        <p:calendar
            pattern="dd-MM-yyyy"
            converterMessage="#{msg['invalidEndDateFormat']}"
            value="#{...}"
            disabled="#{...}"
            showOn="button">
        </p:calendar>
</h:panelGrid>

Answer 1

不确定这是否对您有帮助，但我的解决方法是在对话框或您拥有的任何容器组件上添加滚动事件。在滚动事件中，您查找 datepicker 元素并将其隐藏。这是一个片段:

    $(document).ready(function() {
            var dialog1 = $('.ui-dialog .ui-dialog-content');

            dialog1.scroll(function() {
                $('#ui-datepicker-div').hide();
            });
        });