Equal widths of p:panel-s inside p:dataGrid

Question

I have a p:dataGrid with 3 columns, containing panels:

<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>

I want the panels to have equal width and stretch as I resize browser window. As long as the panels had the same content, it worked perfectly. However when I provided some real data, the panels began to stretch according to the content (one of the columns took 70% of window width).

When I set fixed width for the panels:

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

they have equal size, but I want them to stretch and resize to fill the whole screen. I've tried using columnClasses property:

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

with css:

.column1{width: 33%;}

but it didn't help.

Any idea how do I keep my panels equal size? I'm ok with fixed height (height: 150px;), but I want the width of the panel to stretch with dataGrid.

Answer 1

Solution:

xhtml:

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

css:

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

The columnClasses property did not work because there's no such property for p:dataGrid (but there is one for p:panelGrid).