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

Answer 1

添加显示：块;样式到outputPanel像这样：

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

Answer 2

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

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

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

Answer 3

关于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 4

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

所以我最终使用了：

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

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

4 个答案:

整页布局中的表单