Question

现在使用primefaces 6.2，在使用6.0时我已经遇到了这个问题，因此我认为是时候进行研究了。当页面（文档）的内容高度大于窗口（浏览器的视口）的高度时，您可以清楚地看到，对话框位于文档的中心，而不是位于窗口的中心。当页面很大时，对话框仍然位于页面级别而不是窗口级别的中心。这意味着如果页面的高度至少是窗口的两倍，则对话框将落在窗口的下方。为了测试这一点，我制作了一个示例页面：

<html lang="nl" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:p="http://primefaces.org/ui">
<h:head>

</h:head>

<h:body>

    <h:form id="show">
        <p:commandButton value="Test" onclick="PF('dialog').show();" />
    </h:form>

    <p:dialog id="dialog" header="dialog" widgetVar="dialog" modal="true" height="100">

        <h:form id="refresh">
            <p:button onclick="document.location.href = document.location.href;" value="Refresh" />
        </h:form>

    </p:dialog>

    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>

</h:body>
</html>

在此示例页面中，它将触发对话框。在大多数笔记本电脑上使用时，由于屏幕分辨率足够大，它将在中央很好地显示对话框。现在，调整浏览器屏幕的大小，直到出现滚动条。这意味着一些“测试”行应该落在窗口之外。现在再次触发对话框。就我而言，它不再居中。调整浏览器的大小也无效...

奇怪的是，在Primefaces展示柜上进行测试并调整屏幕大小时，对话框始终居中！结论有一些不同，但是我仅对基本字体使用基本配置。我注意到，尽管所有内容都包装在primefaces网站上的布局容器中。还尝试将所有内容包装在布局容器中，但这无济于事。

任何人都知道为什么会这样。这是我应该报告的错误吗？这是设计使然吗，对话框将始终以文档为中心（并且出于奇怪的原因，展示柜不遵循此逻辑...）。

Answer 1

我找到了解决方案：需要添加文档类型声明：<!DOCTYPE html>。

尽管声明对于XHTML5文档不是强制性的；实际上，对于使用质数符号是强制性的。如果不是这样，某些组件可能会出现意外行为，例如此对话框。

更多信息：https://github.com/primefaces/primefaces/issues/4115

对话框不以窗口高度为中心，而是以文档高度为中心

1 个答案: