web-dev-qa-db-fra.com

Comment définir la largeur d'une colonne p: dans un p: dataTable dans PrimeFaces 3.0?

J'utilise PrimeFaces 3.0-M3 et j'ai un <p:dataTable> avec deux colonnes. Je veux que la première colonne soit fixée à une largeur de 20px. L'autre colonne peut utiliser tout l'espace restant.

Voici des captures d'écran de ce que je reçois actuellement:

screenshot 1

screenshot 2

Le premier <p:column> semble ignorer le paramètre style qui aurait dû limiter la largeur. Il est beaucoup trop gros pour le minuscule carré coloré qui est le seul contenu à l'intérieur, puis l'autre colonne est poussée trop à droite.

Voici plus de mon code 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>

Quelqu'un peut-il me dire comment modifier mon code Facelet pour que la première colonne ait une largeur fixe de 20 pixels?

cssjsfjsf-2primefacesdatatable
34
Jim Tough

Dans PrimeFaces 3.0, ce style est appliqué au <div> interne généré de la cellule du tableau, et non au <td> comme vous (et moi-même) vous y attendriez. L'exemple suivant devrait fonctionner pour vous:

<p:dataTable styleClass="myTable">

avec

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

Dans PrimeFaces 3.5 et versions ultérieures, cela devrait fonctionner exactement comme vous l'aviez prévu.

34
BalusC

Cela a fonctionné pour moi

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

Pour une raison quelconque, cela ne fonctionnait pas

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

Mais cela a fonctionné:

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

Je ne sais pas quel navigateur vous utilisez, mais selon w3schools.com, nth-child et nth-last-child fonctionnent maintenant sur MSIE 8. Je ne sais pas à propos de 9. http: // www .w3schools.com/cssref/pr_border-style.asp vous donnera plus d’informations.

2
DougMH

peux-tu essayer

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

Je viens de faire ce qui suit (en V 3.5) et cela a fonctionné comme un charme:

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

Ajout à la réponse de @BalusC. Vous devez également définir la largeur des en-têtes. Dans mon cas, css ci-dessous ne peut s'appliquer qu'à la largeur de colonne de mon tableau.

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