使用p：layout在整个页面上正确显示p：blockUI

Question

我有以下布局：

<h:body>
    <p:outputPanel layout="block" id="page" style="width:100%;height:100%;">
        <h:panelGroup layout="block">

            <p:layout fullPage="true">
                <p:layoutUnit id="top" position="north" size="60">
                    ...
                </p:layoutUnit>

                <p:layoutUnit id="left" position="west" size="145" header="Menu" resizable="true" collapsible="true">
                    ...
                </p:layoutUnit>

                <p:layoutUnit id="center" position="center">
                    ...
                </p:layoutUnit>

            </p:layout>
        </h:panelGroup>
    </p:outputPanel>
</h:body>

在中央布局单元中，我定义了一些blockUI组件：

<p:blockUI block=":page" trigger="searchButton">

我想阻止整个页面，但带有阻止层的div在layoutUnit divs下。因此，我只能在布局单元之间的空间中看到此blockUI层，我希望将其作为第一层放在顶部。

Answer 1

关于以下primefaces用户指南：-

完整页面布局中的表单

[使用表单和整页布局时，请避免使用包含layoutunits的表单，因为生成的dom可能不相同。

因此跟随无效。

<p:layout fullPage="true">
<h:form>
    <p:layoutUnit position="west" size="100">
        <h:outputText value="Left Pane" />
    </p:layoutUnit>
    <p:layoutUnit position="center">
        <h:outputText value="Right Pane" />
    </p:layoutUnit>
</h:form>

布局单位必须具有自己的表单

，也请避免由于相同原因尝试更新布局单位，而改为更新其内容。然后，我们无法管理p：layout或p：layoutUnit，因为它们不在表单之下。

Answer 2

添加显示：阻止；样式为outputPanel，如下所示：

<p:outputPanel layout="block" id="page" style="display:block;">

Answer 3

为什么不阻塞p:layout而不是将其包装在div中并阻塞包装器？

<p:layout id="page" ...

<p:blockUI block=":page" ...

Answer 4

该问题应被视为最佳答案。实际上，它按发布方式工作。布局图块或样式显示：不需要图块，它已经是p：outputPanel的默认值。但是宽度和高度很重要。

所以我最终使用了：

<p:outputPanel id="page" style="width:100%;height:100%;">