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>