2

我有 3 列的 ap:dataGrid，包含面板：

<p:dataGrid columns="3" var="item" value="#{bean.data}">
    <p:panel>
        <p:panelGrid columns="1" style="width: 100%;" >
            <h:outputText value="some data..." />
        </p:panelGrid>
        <p:panelGrid columns="2" style="width: 100%;" >
            <h:outputText value="some more data ..." />
        </p:panelGrid>
    </p:panel>
</p:dataGrid>

我希望面板在调整浏览器窗口大小时具有相同的宽度和拉伸。只要面板具有相同的内容，它就可以完美地工作。然而，当我提供一些真实数据时，面板开始根据内容拉伸（其中一列占据了窗口宽度的 70%）。

当我为面板设置固定宽度时：

<p:dataGrid columns="3" var="item" value="#{bean.data}">
    <p:panel style="width: 300px; height: 150px;">

它们具有相同的大小，但我希望它们拉伸和调整大小以填满整个屏幕。我试过使用 columnClasses 属性：

<p:dataGrid columns="3" columnClasses="column1,column1,column1">

用CSS：

.column1{width: 33%;}

但这没有帮助。

知道如何保持面板大小相同吗？我可以使用固定高度（高度：150px;），但我希望面板的宽度可以使用 dataGrid 进行拉伸。

4

1 回答 1

0

解决方案：

xhtml:

<p:dataGrid styleClass="someCustomClass" ... />

CSS：

.someCustomClass .ui-datagrid-column {width: 33.33%;}

columnClasses 属性不起作用，因为 p:dataGrid 没有这样的属性（但 p:panelGrid 有一个）。

于 2014-02-28T13:44:49.617 回答