2

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.

Aneta Stępień
  • 704
  • 6
  • 20
  • It would be more helpful to see the actual render result instead of this. Yout attemp of `width: 33.33%;` is correct. So mabybe something else is wrong. I see you also attach style-tags to the parent items. Maybe there are also styles-tags on the column-items which override your css. We can not know like this. – Nico O Feb 27 '14 at 10:45
  • what is inside the panelgrid? just text? I had similar problems that were caused by a h:link (rendered as 'a'). the solution in my case was to set display:block to the link and set the size there too – damian Feb 27 '14 at 17:42
  • Thank you for replies, they were helpful. I've checked the render result and realized that columnClasses style was not applied. And that is so because panelGrid has columnClasses property, but dataGrid has not. I've applied the 33.33% style by css selector and it works perfectly. – Aneta Stępień Feb 28 '14 at 13:42

1 Answers1

0

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

Aneta Stępień
  • 704
  • 6
  • 20