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

Question

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?

BalusC · Accepted Answer · 2015-04-15T12:21:17.383

38

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.

edited Apr 15 '15 at 12:21

answered Sep 15 '11 at 16:53

BalusC

1,082,665
372
3,610
3,555

I tried it but it didn't seem to have any effect. The only other change I made was to remove the `style="width:20px;"` from my `` declaration, which also had no effect. – Jim Tough Sep 15 '11 at 17:03
2

There it is... Works with your solution under Firefox 4.0.1, but does not work under IE 7. Unfortunately for me, IE 7 is the browser being used in the target environment. – Jim Tough Sep 15 '11 at 17:19
2

That old browser does indeed not support all modern selectors. Consider IE7.js: http://code.google.com/p/ie7-js/ Or report an issue to PF guys that you want the `columnClasses` back in the `` like as `` has (that was the first what I looked at, but to my surprise it didn't support that attribute) see also http://forum.primefaces.org/viewtopic.php?f=3&t=1797 – BalusC Sep 15 '11 at 17:20
You're welcome. Perhaps they will be able to suggest alternative and IE7-compatible ways to achieve this requirement. As far I don't see any, but I'd however be curious to their answer. – BalusC Sep 15 '11 at 17:26
I've started a thread here: http://forum.primefaces.org/viewtopic.php?f=3&t=15031 – Jim Tough Sep 15 '11 at 17:38
That thread is a wormhole into a dark abyss without solutions. – Andrew Apr 06 '17 at 12:57
Besides, these solutions are crap. What if you need varying columns? – Andrew Apr 06 '17 at 13:00
Just don't use a jurassic library version if you don't want crap? – BalusC Apr 06 '17 at 13:18

score 20 · Answer 2 · answered May 14 '14 at 15:05

20

This worked for me

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

answered May 14 '14 at 15:05

daya

349
2
6

score 5 · Answer 3 · answered Jan 27 '17 at 19:37

5

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

answered Jan 27 '17 at 19:37

Jose Manuel Gomez Alvarez

1,972
22
29

2

(Still valid:) In Primefaces 6.1 attribute width without a unit means px, with unit % it means percentage of table width. – alfonx Feb 05 '18 at 14:19
% is not working for me. I was able to use e.g. `width="40"` and `width="60"` like they were %'s though. – Andrew Apr 12 '18 at 17:11
1

The reason is that PF adds the "px" to the width attribute, so in the first case you got `style="width:10pxpx"` – Alessandro Mar 22 '21 at 13:50

score 2 · Answer 4 · answered Mar 12 '13 at 22:52

2

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.

answered Mar 12 '13 at 22:52

DougMH

105
1
8

score 1 · Answer 5 · answered Mar 07 '13 at 18:40

1

can you try

<p:column width="20">

answered Mar 07 '13 at 18:40

enrico.devita

153
1
5

score 1 · Answer 6 · answered Feb 05 '18 at 11:47

1

Inline styling would work in any case

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

answered Feb 05 '18 at 11:47

Bellash

7,560
6
53
86

score 0 · Answer 7 · answered Apr 24 '14 at 11:07

0

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

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

answered Apr 24 '14 at 11:07

Lars Juel Jensen

1,643
1
22
31

score 0 · Answer 8 · answered Sep 16 '15 at 09:46

0

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

answered Sep 16 '15 at 09:46

Cataclysm

7,592
21
74
123

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

8 Answers8

Linked