web-dev-qa-db-ja.com

PrimeFaces 3.0のp：dataTableのp：columnの幅を設定する方法は？

PrimeFaces 3.0-M3を使用していますが、<p:dataTable>に2つの列があります。最初の列を20pxの幅に固定する必要があります。他の列は、残ったスペースを使用できます。

私が現在得ているもののスクリーンショットは次のとおりです。

screenshot 1

screenshot 2

最初 <p:column>は、幅を制限するはずのstyle設定を無視しているようです。その中にある唯一のコンテンツである小さな色付きの正方形には大きすぎるサイズであるため、他の列が右に押し出されすぎています。

Faceletコードの詳細は次のとおりです。

<p:dataTable
        id="dataTableExpressions"
        value="#{catconBean.userDefinedExpressionDataModel}"
        var="currentRow"
        emptyMessage="!! EMPTY TABLE MESSAGE !!"
        selection="#{catconBean.userDefinedExpressionToEdit}"
        selectionMode="single">
    <p:ajax 
            event="rowSelect" 
            listener="#{catconBean.onUserDefinedExpressionRowSelect}"
            update=":toolbarForm:catconToolbar" />
    <p:ajax 
            event="rowUnselect" 
            listener="#{catconBean.onUserDefinedExpressionRowUnselect}"
            update=":toolbarForm:catconToolbar" />

    <p:column id="paletteColor" style="width:20px;">
        <h:panelGroup 
                layout="block"
                rendered="#{not empty currentRow.paletteColor}"
                style="width:16px;height:16px;border:thin;border-style:solid;border-color:black;background-color:##{currentRow.paletteColor.RGB};" />
        <h:panelGroup 
                layout="block"
                rendered="#{empty currentRow.paletteColor}"
                style="width:16px;height:16px;border:thin;border-style:dashed;border-color:red;background-color:white;text-align:center;">
            <h:outputText value="?" style="color:red;font-weight:bold;" />
        </h:panelGroup>
    </p:column>

    <p:column id="name">
        <f:facet name="header">
            <h:outputText value="#{bundle.catcon_label_CategoryName}" />
        </f:facet>
        <h:outputText 
            value="#{currentRow.name}"
            style="#{not currentRow.definitionComplete ? 'color:red;' : ''}" />
    </p:column>
</p:dataTable>

Faceletコードを変更して最初の列の幅を20pxに固定する方法を教えてもらえますか？

cssjsfjsf-2primefacesdatatable
35
Jim Tough

PrimeFaces 3.0では、そのスタイルは、あなた（そして私）が期待する<div>ではなく、生成されたテーブルセルの内側<td>に適用されます。次の例はあなたのためにうまくいくはずです：

<p:dataTable styleClass="myTable">

と

.myTable td:nth-child(1) {
    width: 20px;
}

PrimeFaces 3.5以降では、コーディングおよび期待したとおりに動作するはずです。

35
BalusC

これは私のために働いた

<p:column headerText="name" style="width:20px;"/>
13
daya

何らかの理由で、これは機能していませんでした

<p:column headerText="" width="25px" sortBy="#{row.key}">

しかし、これはうまくいきました：

<p:column headerText="" width="25" sortBy="#{row.key}">
3
Jose Manuel Gomez Alvarez

使用しているブラウザはわかりませんが、w3schools.comによると、nth-childとnth-last-childはMSIE 8で動作します。9については知りません。 http：/ /www.w3schools.com/cssref/pr_border-style.asp で詳細を確認できます。

2
DougMH

試してもらえますか

<p:column width="20">
0
enrico.devita

私はちょうど（V 3.5で）次のことをしましたが、それは魅力のように機能しました：

<p:column headerText="name" width="20px"/>
0
Lars Juel Jensen

インラインスタイリングはどのような場合でも機能します

  <p-column field="Quantity" header="Qté" [style]="{'width':'48px'}">
0
Bellash

@BalusCの回答への追加。また、ヘッダーの幅を設定する必要があります。私の場合、css以下はテーブルの列幅にのみ適用できます。

.myTable td:nth-child(1),.myTable th:nth-child(1) {
   width: 20px;
}
0
Cataclysm