css - 对话框中的 Primefaces 8.0 日历弹出窗口相对于父屏幕滚动位置定位

问题描述

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

以下是如何重现：

如果父窗口滚动到顶部，则对话框上的日历弹出窗口位置正确
如果父窗口向下滚动一点，则对话框上的日历弹出窗口位于离输入框稍远一点的位置
距离偏移似乎与父窗口的滚动量有关。
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 渲染得并不好。加上鼠标指针在增加时会覆盖小时和分钟数字。

单击向上或向下箭头是低效的。

标签： cssjsfprimefaces

css - 对话框中的 Primefaces 8.0 日历弹出窗口相对于父屏幕滚动位置定位

问题描述

解决方案

推荐阅读