在p:dataGrid内部等宽度的p:panel-s

Question

我有一个p:dataGrid，有3列，包含面板：

<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进行拉伸。

Answer 1

解决方案：

xhtml：

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

css：

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

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