wake-up-neo.net

Festlegen der Breite einer p: -Spalte in einer P: dataTable in PrimeFaces 3.0?

Ich verwende PrimeFaces 3.0-M3 und habe einen <p:dataTable> mit zwei Spalten darin. Ich möchte, dass die erste Spalte auf einer Breite von 20 Pixeln festgelegt wird. Die andere Spalte kann den verbleibenden Speicherplatz verwenden.

Hier sind Screenshots von dem, was ich gerade bekomme:

screenshot 1

screenshot 2

Der erste <p:column> scheint die style-Einstellung zu ignorieren, deren Breite begrenzt sein sollte. Es ist viel zu groß für das kleine farbige Quadrat, das den einzigen Inhalt enthält, und dann wird die andere Spalte zu weit nach rechts geschoben.

Hier ist mehr von meinem Facelet-Code:

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

Kann mir jemand sagen, wie ich meinen Facelet-Code so ändern kann, dass die erste Spalte eine feste Breite von 20 Pixeln hat?

cssjsfjsf-2primefacesdatatable
34
Jim Tough

In PrimeFaces 3.0 wird dieser Stil auf den generierten inneren <div> der Tabellenzelle angewendet, nicht auf den <td>, wie Sie (und ich) erwarten würden. Das folgende Beispiel sollte für Sie funktionieren:

<p:dataTable styleClass="myTable">

mit

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

In PrimeFaces 3.5 und höher sollte es genau so funktionieren, wie Sie es programmiert und erwartet haben.

34
BalusC

Das hat bei mir funktioniert

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

Aus irgendeinem Grund funktionierte das nicht

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

Aber das hat funktioniert:

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

Ich weiß nicht, welchen Browser Sie verwenden, aber laut w3schools.com funktionieren jetzt nth-child und nth-last-child mit MSIE 8. Ich weiß nicht über 9. http: // www .w3schools.com/cssref/pr_border-style.asp gibt Ihnen weitere Informationen.

2
DougMH

kannst du es versuchen

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

Ich habe gerade folgendes gemacht (in V 3.5) und es hat wie ein Zauber funktioniert:

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

Inline-Styling würde auf jeden Fall funktionieren

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

Ergänzung der Antwort von @BalusC. Sie müssen auch die Breite der Header festlegen. In meinem Fall kann css nur für die Spaltenbreite meiner Tabelle gelten.

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