Primefaces 面板中的可滚动区域

Question

我使用 Primefaces 整页布局，我想在中心单元中插入一个面板 (p:panel)，其中包含可滚动的内容（并固定 header），但它不起作用.我试过了:

使面板的内容可滚动
正在将内容插入 p:scrollPanel
正在将内容插入可滚动的 p:outputPanel

None 这些解决方案有效。我认为主要问题是我不能设置一个固定的height/width，因为中心单元的内容必须占用所有"remaining size"。有人可以给我提示吗？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:xyrion="http://www.rohag.ch/xyrion/jsf"
      xmlns:p="http://primefaces.org/ui">
<h:head>

    <h:outputStylesheet library="css" name="test.css"/>

</h:head>
<h:body>


    <p:layout fullPage="true">

        <p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true">
            <h:outputText value="North unit content."/>
        </p:layoutUnit>

        <p:layoutUnit position="south" size="100" header="Bottom" resizable="true" closable="true" collapsible="true">
            <h:outputText value="South unit content."/>
        </p:layoutUnit>

        <p:layoutUnit position="west" size="200" header="Left" resizable="true" closable="true" collapsible="true">

        </p:layoutUnit>

        <p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true"
                      effect="drop">
            <h:outputText value="Right unit content."/>
        </p:layoutUnit>


        <p:layoutUnit position="center">

            <p:panel header="Title" toggleable="false" closable="false">

                <p:outputPanel style="display:block; width:calc(100% - 20px); height:calc(100% - 20px); overflow: auto">

                    <table style="width:1000px">
                        <tbody>
                        <tr>
                            <th>Firstname</th>
                            <th>Lastname</th>
                            <th>Age</th>
                        </tr>
                        <tr>
                            <td>Jill</td>
                            <td>Smith</td>
                            <td>50</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>
                        <tr>
                            <td>Eve</td>
                            <td>Jackson</td>
                            <td>94</td>
                        </tr>


                        </tbody>
                    </table>
                </p:outputPanel>
            </p:panel>


        </p:layoutUnit>

    </p:layout>


</h:body>
</html>

layout.css

 .ui-layout-center .ui-layout-unit-content {
                      overflow:hidden !important;
                  }

Answer 1

我个人不喜欢 "ui-layout" 模板。仅使用自定义 CSS，也许 Grid CSS 和 XHTML 可以使模板更好，并具有更大的控制权。

对于你的问题我会这样做：

将 panel 组件高度设置为 100%（您可以看到 ui-layout-unit-content 有一个计算高度，面板高度将与此相关）：

#your-panel-id.ui-panel { height: 100% }
将 panel 内容高度设置为 100%:

#your-panel-id .ui-panel-content { height: 100% }
设置您的 outputPanel 高度和溢出：

#your-outputPanel-id { height: calc(100% - someSpecificHeight); overflow: auto; }

注意："someSpecificHeight" - 与您的应用程序相关CSS。我在我的机器上测试过（我使用 Modena 模板），它比 50px 大，以便在滚动时显示所有 table 元素。

希望对你有用！ :)

Primefaces 面板中的可滚动区域

Scrollable area within Primefaces panel

css

primefaces

scroll

jsf-2.2

scrollpane