Question

我有一个包含3列的p：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拉伸面板的宽度。

Answer 1

解决方案：

XHTML：

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

的CSS：

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

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

在p：dataGrid中p：panel-s的宽度相等

1 个答案: