p:datatable align according to screen resoultion

[xbashtech]

Hi Guys
I have got some aligning issue with the primefaces datatable when the screen resolution changes the datacolumns are overlapping .Let me know how to fix this

Resolution:766×442

Here is the code

Code: Select all

<p:dataTable id="ListOfVisitedHos" var="app" value="#{listOfVisHosBean.list_visit}" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {Exporters}" paginator="true" rows="10"
					style="font-size:13px;width:99%;text-align:center;" reflow="true">
					<f:facet name="{Exporters}">
						<h:commandLink title="Generate Excel File">
							<p:graphicImage name="images/excel.svg" width="38px" height="38px" styleClass="Fright" library="spark-layout"/>
							<p:dataExporter type="xls" target="ListOfVisitedHos" fileName="List_Of_Visited_Hospital" />
						</h:commandLink>
						<h:commandLink title="Generate Pdf File">
							<p:graphicImage name="images/pdf.svg" width="38px" height="32px" styleClass="Fright" library="spark-layout"/>
							<p:dataExporter type="pdf" target="ListOfVisitedHos" fileName="List_Of_Visited_Hospital" />
						</h:commandLink>
					</f:facet>
					<p:column headerText="Doctor Name" width="8%">
						<p:outputLabel value="#{app.docname}" style="display:inline-block;color:black;" />
					</p:column>
					<p:column headerText="Hospital Name" width="10%">
						<p:outputLabel value="#{app.hos_name}" style="display:inline-block;color:black;" />
					</p:column>
					<p:column headerText="Visited Date" width="8%">
						<p:outputLabel value="#{app.visit_date}" style="display:inline-block;color:black;">
							<f:convertDateTime pattern="dd-MMM-yyyy" />
						</p:outputLabel>
					</p:column>
					<p:column headerText="Contact Number" width="10%">
						<p:outputLabel value="#{app.contact_details}" style="display:inline-block;color:black;" />
					</p:column>

					<p:column headerText="Remarks" width="40%">
						<p:outputLabel value="#{app.remarks}" style="display:inline-block;color:black;" />
					</p:column>
					<p:column headerText="Visited By" width="8%">
						<p:outputLabel value="#{app.mod_user_id}" style="display:inline-block;color:black;" />
					</p:column>

					<p:column headerText="View" exportable="false" width="6%">
						<p:commandButton title="View" icon="fa fa-search Fs1 white" update="@(form)" action="#{listOfVisHosBean.onRowSelect()}">
							<f:setPropertyActionListener value="#{app}" target="#{listOfVisHosBean.hos_visit}" />
						</p:commandButton>
					</p:column>

					<p:column headerText="Add Remarks" exportable="false" width="8%">
						<p:commandButton title="Add New Remarks" icon="fa fa-pencil Fs1 white" update="@(form)" action="#{listOfVisHosBean.onRemarkSelect}">
							<f:setPropertyActionListener value="#{app}" target="#{listOfVisHosBean.hos_visit}" />
						</p:commandButton>
					</p:column>

					<p:column headerText="Edit Details" exportable="false" width="8%">
						<p:commandButton title="Edit Details" icon="fa fa-user Fs1 white" update="@(form)" action="#{listOfVisHosBean.userDetailsRowSelect}">
							<f:setPropertyActionListener value="#{app}" target="#{listOfVisHosBean.hos_visit}" />
						</p:commandButton>
					</p:column>

				</p:dataTable>

[mert.sincan]

Please try with;

Code: Select all

<p:dataTable  tableStyle="table-layout:auto" ..>
   ....
</p:dataTable>

[xbashtech]

Please try with;

Code: Select all

<p:dataTable  tableStyle="table-layout:auto" ..>
   ....
</p:dataTable>

Thanks Aragon for your help it Works

[mert.sincan]

Glad to hear, thanks!