Равная ширина p:panel-s внутри p:dataGrid

Question

У меня есть a 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%;}

но это не помогло

Любая идея, как мне сохранить мои панели одинакового размера? Я в порядке с фиксированной высотой (высота: 150 пикселей;), но я хочу, чтобы ширина панели растягивалась с помощью dataGrid.

Answer 1

Решение:

XHTML:

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

CSS:

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

Свойство columnClasses не сработало, потому что такого свойства нет для p:dataGrid (но есть свойство p:panelGrid).