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:
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?
This question is related to
css
jsf
jsf-2
primefaces
datatable
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.
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;
}
I just did the following (in V 3.5) and it worked like a charm:
<p:column headerText="name" width="20px"/>
can you try
<p:column width="20">
Inline styling would work in any case
<p-column field="Quantity" header="Qté" [style]="{'width':'48px'}">
This worked for me
<p:column headerText="name" style="width:20px;"/>
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}">
Source: Stackoverflow.com