2

パネルを含む 3 列の ap: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>

ブラウザー ウィンドウのサイズを変更するときに、パネルの幅とストレッチを同じにしたい。パネルの内容が同じである限り、完全に機能しました。しかし、実際のデータを提供すると、コンテンツに応じてパネルが伸び始めました (列の 1 つがウィンドウ幅の 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%;}

しかし、それは役に立ちませんでした。

パネルを同じサイズに保つ方法はありますか? 固定の高さ (height: 150px;) で問題ありませんが、パネルの幅を dataGrid で引き延ばしたいと考えています。

4

1 に答える 1

0

解決：

xhtml:

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

CSS:

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

p:dataGrid にはそのようなプロパティがない (ただし、p:panelGrid には 1 つある) ため、columnClasses プロパティは機能しませんでした。

于 2014-02-28T13:44:49.617 に答える