Question

[Primefaces 5.0]

我有一个包含数据表的tabview。根据选项卡，数据表填充不同的数据（即不同数量的列和行）。以下设置可以很好地处理数据，但无论我是否将最大高度约束放在面板，选项卡或数据表上，它似乎都不会将其约束到屏幕的百分比。如果我将约束设置为特定值（例如300px），它就可以工作，但我不愿意。

基本上：我想要一个适合其内容的数据表，直到它占据屏幕的30％。此时，它应滚动。

    <body style="min-width: 1366px;min-height: 768px;height: 100%;margin-left: 20px;">
    <div style="width: 10%;float: left"> ... </div>
    <div style="width: 90%;float: right">
            <p:panel classStyle="panel" header="Instance Data View" style="width: 100%;max-height: 30%;margin-bottom: 1%">
                <p:tabView value="#{pageBean.tables}" var="table" dynamic="true">
                    <p:tab title="#{table.tableName}" >
                        <p:dataTable var="row" 
                            value="#{pageBean.tableData[table.tableName].data}" 
                            resizableColumns="true">
                            <p:columns value="#{pageBean.tableData[table.tableName].columns}" style="white-space: normal;"
                                var="column" columnIndexVar="columnIndex">
                                <f:facet name="header">
                                    <p:outputLabel value="#{column}"/>
                                </f:facet>
                                <p:outputLabel value="#{row[columnIndex]}"/>
                            </p:columns>
                        </p:dataTable>
                    </p:tab>
                </p:tabView>
            </p:panel>
            ...
    </div>
    </body>

Answer 1

你可以使用ScrollWidth和ScrollHeight来获取数据表。为此目的有三种选择。例如：

scrollHeight="30%"
scrollWidth="30%"
scrollable="true"

通过此方法，您可以控制数据表大小。

p.s：你不会说你的主要版本。

Answer 2

对于视口高度，您可以在max-height的大小上使用“vh”，如下所示：

<body style="min-width: 1366px;min-height: 768px;height: 100%;margin-left: 20px;">
<div style="width: 10%;float: left"> ... </div>
<div style="width: 90%;float: right">
        <p:panel classStyle="panel" header="Instance Data View" style="width: 100%;margin-bottom: 1%">
            <p:tabView value="#{pageBean.tables}" var="table" dynamic="true">
                <p:tab title="#{table.tableName}" >
                    <p:dataTable var="row" 
                        value="#{pageBean.tableData[table.tableName].data}" 
                        resizableColumns="true" style="max-height: 30vh;">
                        <p:columns value="#{pageBean.tableData[table.tableName].columns}" style="white-space: normal;"
                            var="column" columnIndexVar="columnIndex">
                            <f:facet name="header">
                                <p:outputLabel value="#{column}"/>
                            </f:facet>
                            <p:outputLabel value="#{row[columnIndex]}"/>
                        </p:columns>
                    </p:dataTable>
                </p:tab>
            </p:tabView>
        </p:panel>
        ...
</div>
</body>

如何将数据表放入具有最大高度百分比的面板中

2 个答案: