使用 p:layout 在整个页面上正确显示 p:blockUI答案

【问题标题】：Displaying properly p:blockUI on whole page with p:layout使用 p:layout 在整个页面上正确显示 p:blockUI
【发布时间】：2012-09-18 11:30:11
【问题描述】：

我有以下布局：

<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 div 下。所以我只能在布局单元之间的空间中看到这个 blockUI 层，我想在顶部看到它作为第一层。

【问题讨论】：

标签： css jsf layout primefaces

【解决方案1】：

添加显示：块；像这样为 outputPanel 设置样式：

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

【讨论】：

【解决方案2】：

关于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，因为它们不在表单下。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

我也尝试了 p:layout 并且 blockUI 根本没有出现。

【解决方案4】：

该问题应被接受为最佳答案。事实上，它的工作原理与发布的一样。布局块或样式显示：不需要块，它已经是 p:outputPanel 的默认值。但是宽度和高度很重要。

所以我最终使用了：

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

【讨论】：