not getting columns stack in dataTable using reflow

laurusis · 04 Nov 2015, 07:42

Hi,
I am using primefaces 5.3 and adamantium theme & layout.

I have a primefaces datatable using reflow attribute having 9 columns, when zoom-in the table should show in column stacked mode but result is not as it shown in the adamantium live preview. below is my dataTable sample code.

Code: Select all

<p:dataTable id="empTableId" var="_empDetails"
				value="#{empDetailsListBean.emptDetailsList}" reflow="true"
				rowKey="#{_empDetails.empId}" widgetVar="empTable"
				selection="#{empDetailsListBean.selectedRow}" rows="8"
				rowIndexVar="rowIndex">
				<p:column selectionMode="single" style="width:4%;" />
				<p:column headerText="SI<br/> No" style="width:4%; ">
					<h:outputText value="#{rowIndex+1}" />
				</p:column>
				<p:column headerText="Employee <br/> Code"
					style="width:11% ; padding-left:5px">
					<h:outputText value="#{_empDetails.empCode}" styleClass="wrap" />
				</p:column>
				<p:column headerText="Employee <br/> Name" style="width:13% ;">
					<h:outputText value="#{_empDetails.empName}" styleClass="wrap" />
				</p:column>
				<p:column headerText="Status" style="width:14% ; ">
					<h:outputText value="#{_empDetails.empStatus}" />
				</p:column>
				<p:column headerText="Joining<br/> Date"
					style="width:10% ; text-align: center">
					<h:outputText value="#{_empDetails.joiningDate}">
						<f:convertDateTime pattern="dd MMM yyyy" locale="en_US"
							type="both" timeZone="IST" />
					</h:outputText>
				</p:column>
				<p:column headerText="Resigned <br/> Date"
					style="width:11% ; text-align: center">
					<h:outputText value="#{_empDetails.resignedDate}">
						<f:convertDateTime pattern="dd MMM yyyy" locale="en_US"
							type="both" timeZone="IST" />
					</h:outputText>
				</p:column>
				<p:column headerText="Remarks" style="width:21% ; ">
					<h:outputText value="#{_empDetails.remarks}" styleClass="wrap" />
				</p:column>
			</p:dataTable>

after using reflow and zoom-in headers have gone but columns are not stacked.
any idea, kindly help me out.

05 Nov 2015, 09:55

Please try with 'width' attribute of p:column instead of style="width:XXX;"
Exp;

Code: Select all

<p:column headerText="SI<br/> No" width="4%">

laurusis · 30 Dec 2015, 12:23

Thanks aragorn,

It worked for me after changing Doctype from composition to html in beginning of xhtml page and your suggestion also helped me in resolving issue.

for say:
---------
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

changed to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

03 Jan 2016, 13:05

Glad to hear, thanks for the update;)
I suggest using standard doctype (<!DOCTYPE html>). I think DOCTYPE definitions show different behaviors on browsers. We always use standard doctype in our Layouts.

Code: Select all

<!DOCTYPE html>

Happy new year

not getting columns stack in dataTable using reflow

Who is online