[Question]How to make a Datatable same width???

[felix1000aa]

Dear all,
I am a very newbie in jsf and prime faces.
I have a problem that i cannot set the data table to the same width in each rows
The Table html is the following:

Code: Select all

			<p:dataTable id="carrierWithdrawalTable" var="rowResult" value="#{formBeanLMS08.resultList}"
				scrollable="true" rows="10" selection="#{formBeanLMS08.selectedResult}">
				<f:facet name="header"> Carrier to be Withdrawal </f:facet> 
				
				<p:column selectionMode="multiple" />
				<p:column>
					<f:facet name="header"><h:outputText value="Carrier Type" /></f:facet>
					<h:outputText value="#{rowResult.carrierType}" />
				</p:column>
				
				<p:column>
					<f:facet name="header"><h:outputText value="Carrier No." /></f:facet>
					<h:outputText value="#{rowResult.carrierNo}" />
				</p:column>
				
				<p:column>
					<f:facet name="header"><h:outputText value="Recycle Count" /></f:facet>
					<h:outputText value="#{rowResult.recycleCount}" />
				</p:column>
		
				<p:column>
					<f:facet name="header"><h:outputText value="Remark" /></f:facet>
					<h:outputText value="#{rowResult.remark}" />
				</p:column>
				
		        <f:facet name="footer">  
		            <p:commandButton value="View" image="ui-icon ui-icon-search"  
		                             update="displaySingle" oncomplete="singleCarDialog.show()"/>  
		        </f:facet>  
			</p:dataTable>

However, the output is the following:


What is the problem with my code???
thank you very much

[Tan Chin Sheng]

I have the same problem.

Code: Select all

    <p:dataTable var="item" value="#{divisionController.items}" paginator="false" rows="10"
                 dynamic="true"
                selection="#{divisionController.selected}" selectionMode="single"
                onRowSelectUpdate="display">
....
        <p:column style="width:11em; word-wrap:break-word;" 
                  filterBy="#{item.checktool}">
            <f:facet name="header">
                <h:outputText value="Check Tool" />
            </f:facet>
            <h:outputText
                value="#{item.checktool}" />
        </p:column>

My case is one of the column is too long.
It works in IE but not FF and Chrome. I read in CSS3 that word-wrap is supposed to work in all three browsers.
I guess because style is applied on to p:column...

[felix1000aa]

However, same problem exists in all IE8, FF4, Chrome
Anyone know what is my problem???

Thank you very much

[Oleg]

Yes, there is such problem. If datatable has width:100% is everything ok, but if it has a fixed width, pagination, etc. don't fit the table width.

[cagatay.civici]

I've started to see more lately, can you try;

Code: Select all

.ui-datatable table {
    table-layout:fixed
}

[cagatay.civici]

Tried following locally and it helped to match header and table widths;

Code: Select all

            .ui-datatable table {
                table-layout: fixed;
            }

            .ui-datatable table thead th{
                white-space: normal
            }

[Oleg]

Code: Select all

.ui-datatable table {
    table-layout:fixed
}

is supported by all modern browsers, but it depends on your requirement how cell content should be appeared - in just one line or can be broken. See CSS reference for table-layout:auto vs. table-layout:fixed. We prefer e.g. table-layout:auto (we have wide and narrow areas for tables). The right solution, in my opinion, would be to place all additional content above / below table in the same table and not in separate divs. PrimeFaces renders something like

Code: Select all

<div class="ui-datatable-header ui-widget-header ui-corner-tl ui-corner-tr">...</div>
<table>......</table>
<div class="ui-datatable-footer ui-widget-header ui-corner-bl ui-corner-br">...</div>

Is it not possible to put table header / footer inside of table and let get them the same width as table automatically?

[kukeltje]

Is it not possible to put table header / footer inside of table and let get them the same width as table automatically?

Not if you want to have the option to scroll just the 'body' of the datatable. 'overflow:scroll' in a tbody was not standard and not supported in all browsers. FF 4(.0.1) seems to be dropping it as well.

[Oleg]

Yes, I'm aware of this. We have discussed that problem here http://primefaces.prime.com.tr/forum/vi ... xed+header

I'm still convinced (from my experience with tables) that header and footer inside of table are better than outside. Check links on the second page in the mentioned above discussion - there are some solution to get header fixed during scrolling. No needs to place it outside.

[kukeltje]

Yes I saw http://www.tablefixedheader.com/. It uses the same concept as PF does. Separate tables for header, body and footer. The difference is that they use colgroup (at least in FF) for the width and can use relative widths for all columns. I'm currently trying this for PF and for FF it seems to work. Not sure if http://www.tablefixedheader.com/ uses some jquery so that for other browsers it is different, but I'll try. I'll even try to change the look of the scroolbar to use the scrollpanel stuff. Oh, and I'll also add a 'dummy' header above the scrollbar, cause that is where http://www.tablefixedheader.com/ fails... There is data behind the scrollbar!