How to set fixed width of <p:column> in <p:dataTable>?

[jim@jimtough.com]

previously posted on Stack Overflow:
http://stackoverflow.com/questions/7434 ... pdatatable

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 my Facelet code:

Code: Select all

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

[kukeltje]

Have you searched the forum... I remember this question being asked several times before.

[jim@jimtough.com]

I got some help with this on Stack Overflow from BalusC, but it looks like the solution will not work on IE 7 (or IE 8 for that matter).

The solution for non-IE browsers was this:

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:

Code: Select all

<p:dataTable styleClass="myTable">

Code: Select all

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

In response to my comments about it not working in IE 7:

That old browser does indeed not support all modern selectors. Consider IE7.js: code.google.com/p/ie7-js Or report an issue to PF guys that you want the columnClasses back in the <p:dataTable> like as <h:dataTable> has (that was the first what I looked at, but to my surprise it didn't support that attribute) see also forum.primefaces.org/viewtopic.php?f=3&t=1797

I took a look at the forum thread that he mentioned: viewtopic.php?f=3&t=1797. It looks like this was dropped quite a while ago.

Is there any other way I can fix this issue under IE7 using what PrimeFaces 3.0 currently provides? This data table looks great in Firefox, but since my customer's environment is stuck at IE7 right now, I need to make it work in IE somehow.

[borkert]

I could get it working with the newest snapshot version. But now the table does not scale automatically to fit the width of the browser anymore. Read:

viewtopic.php?f=3&t=14932

Please give me some feedback, I'm very interested on this issue too.

[cagatay.civici]

Code: Select all

.myTable.ui-datatable table {
   width: auto;
}

Then;

Code: Select all

<p:column style="width:100px" 

[jim@jimtough.com]

Thanks Prime. That fixed the column width issue. The only downside is that the table no longer extends to fill the available window space (which makes sense because I just set "width:auto" on it). However, having properly sized columns is more important to me than filling the empty space.

[cagatay.civici]

By default width is 100% which was our extension, by default browser table width is auto.

When 100%, it scales, so even if you set td width to 100px, it is not 100px in reality because browser scales.

In 3.x, we plan to add width attribute to datatable to set auto width easier.

[borkert]

I found out something that does not really solve the problem but is sufficent for me:

I have some columns that should be just as big as needed, something like "Id" or "Name", fields that contain only short values. And a column "Description" that should take the rest of the space and get as big possible. If you fill the table with lots of values, the table gets formatted in a way that looks ok, but a table with only very few rows looks stupid. If I set for example style="width:500px;" on the "Description" column, it takes up much space by default and pushes all the other fields smaller, this looks much nicer I think:

Before:

After:



Regards,

Sven

[Ryland]

I am running into a weird issue with a column that stores encryption keys (long strings of ascii data). If I leave the column to its default width the datatable forces a horizontal scrollbar to be displayed but the data fills the table yet if I set a style="width:500px;" onto column:

Code: Select all

		        <p:column headerText="Value" style="width:500px;">
		        	<p:cellEditor>
		        		<f:facet name="input"><h:inputText value="#{item.value}"/></f:facet>
		        		<f:facet name="output"><h:outputText value="#{item.value}"/></f:facet>
		        	</p:cellEditor>
	        	</p:column>

then the table looks like this (sorry for the blurring) which shows that the 3rd line down could easily of been appended to the 2nd line and one thing you cant see due to the blurring is that the right hand side has been chopped off mid letter:

[arkantos]

Hi i can change the width as described but what if i have a filter in that column ,i need to change the default size for that inputbox cuz it seems that when is the filter assumes the default size of the inputbox, i look and there is a filterStyle attribute how do use it to fix my problem?

thanks hope you can help me

arkantos

a hero has fallen .. lol