CODEWITHSUNDEEP
cssjsfjsf-2primefacesdatatable
Jim Tough
Jim Tough

Reputation: 15239

How to set width of a p:column in a p:dataTable in PrimeFaces 3.0?

I'm using PrimeFaces 3.0-M3 and I have a <p:dataTable> with two columns in it. I want the first column to be fixed at a width of 20px. The other column can use whatever space is left over.

Here are screenshots of what I'm currently getting:

screenshot 1

screenshot 2

The first <p:column> seems to be ignoring the style setting that should have limited the width. It is sized way too big for the tiny coloured square that is the only content inside it and then the other column is pushed too far to the right.

Here is more of my 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>

Can anyone tell me how to modify my Facelet code to make the first column have a fixed width of 20px?

Upvotes: 42

Views: 119816

Answers (8)

Bellash
Bellash

Reputation: 8204

Inline styling would work in any case

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

Upvotes: 1

Jose Manuel Gomez Alvarez
Jose Manuel Gomez Alvarez

Reputation: 2246

For some reason, this was not working

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

But this worked:

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

Upvotes: 5

Cataclysm
Cataclysm

Reputation: 8608

Addition to @BalusC 's answer. You also need to set width of headers. In my case, below css can only apply to my table's column width.

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

Upvotes: 0

BalusC
BalusC

Reputation: 1109655

In PrimeFaces 3.0, that style get applied on the generated inner <div> of the table cell, not on the <td> as you (and I) would expect. The following example should work out for you:

<p:dataTable styleClass="myTable">

with

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

In PrimeFaces 3.5 and above, it should work exactly the way you coded and expected.

Upvotes: 37

daya
daya

Reputation: 349

This worked for me

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

Upvotes: 20

Lars Juel Jensen
Lars Juel Jensen

Reputation: 1683

I just did the following (in V 3.5) and it worked like a charm:

<p:column headerText="name" width="20px"/>

Upvotes: 0

DougMH
DougMH

Reputation: 103

I don't know what browser you're using, but according to w3schools.com, nth-child and nth-last-child do now work on MSIE 8. I don't know about 9. http://www.w3schools.com/cssref/pr_border-style.asp will give you more info.

Upvotes: 2

enrico.devita
enrico.devita

Reputation: 163

can you try

<p:column width="20">

Upvotes: 1

Related Questions