Dialog 中的 Primefaces 8.0 Calendar 弹出窗口相对于父屏幕滚动位置定位

Question

我为以下问题重新创建了一个最小的可重现示例 p:calendar popup remain below from calendar input in dialog when scroll (on IE and Chrome)。我也一直遇到这个问题，只是弄清楚发生了什么，但我不知道如何解决。 selectOneMenu 的参考问题中的 appendTo 建议似乎不是我们可以应用于日历的属性。

重现方法如下：

如果父级 window 滚动到顶部，则对话框中的日历弹出窗口位置正确
如果父级 window 向下滚动一点，对话框中的日历弹出窗口位于距离输入框更远的下方
距离偏移似乎是相对于父级 window 滚动的量。
top 值似乎是罪魁祸首。

<?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>

编辑我目前无法升级到 PF10，因为我的网站的外观和感觉都与 10 不符。所以我的短期修复只是使用 datePicker，但使用 PF8。但是带有 PF8 的 datePicker 渲染效果不佳。加上鼠标指针向上递增时会覆盖小时和分钟数字。

单击向上或向下箭头效率低下。

Answer 1

您应该使用 p:datePicker 而不是 p:calendar。 DatePicker 旨在取代旧的 p:calendar 组件。 p:datePicker（至少是 PrimeFaces 10 中的那个）使用 absolute 定位而不是 fixed，因此应该可以解决您的问题。

另请参阅：

Can I position an element fixed relative to parent?
https://primefaces.github.io/primefaces/10_0_0/#/components/datepicker

Answer 2

这已在 PrimeFaces 10.0.0RC1 或更高版本中修复。

问题：https://github.com/primefaces/primefaces/issues/6583

Dialog 中的 Primefaces 8.0 Calendar 弹出窗口相对于父屏幕滚动位置定位

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

css

jsf

primefaces