We have got an issue with primefaces spark layout in the primefaces panelgrid i have assigned columns="4" and layout="grid" when i was checking in a different resolution the data is overlapping kindly let me know how to avoid it.
Code: Select all
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:f="http://java.sun.com/jsf/core"
xmlns:pe="http://primefaces.org/ui/extensions" template="/templates/template.xhtml">
<ui:define name="content">
<p:panel id="hospitalvisitpanel" header="#{hospitalVisitBean.page_title}" style="text-align:center;">
<h:form id="hospital_form">
<div class="layout-portlets-box">
<div class="ContainerMod80 Responsive50">
<div class="ContainerIndent TexAlCenter">
<p:panelGrid id="hospital_visit_panel" columns="4" layout="grid">
<h:outputLabel for="firstname" value="Doctor Name" />
<p:inputText value="#{hospitalVisitBean.hos_visit.docname}" id="firstname" maxlength="100" style="width:200px;font-size: 16px;" tabindex="1">
<p:ajax event="change" update="firstname" />
</p:inputText>
<h:outputLabel for="hospitalname" value="Hospital Name" />
<p:inputText value="#{hospitalVisitBean.hos_visit.hos_name}" id="hospitalname" maxlength="200" style="width:200px;font-size: 16px;" tabindex="2">
</p:inputText>
<h:outputLabel for="statename" value="State" />
<p:selectOneMenu id="statename" value="#{hospitalVisitBean.hos_visit.state}" style="width:210px;font-size: 16px;" tabindex="3">
<f:selectItems value="#{hospitalVisitBean.states}"></f:selectItems>
<p:ajax event="change" listener="#{hospitalVisitBean.fetchDistricts()}" update="city"></p:ajax>
</p:selectOneMenu>
<h:outputLabel for="city" value="City/Dist" />
<p:selectOneMenu value="#{hospitalVisitBean.hos_visit.city}" id="city" style="width:210px;font-size: 16px;" tabindex="4">
<f:selectItems value="#{hospitalVisitBean.districts}"></f:selectItems>
<f:ajax event="change" listener="#{hospitalVisitBean.fetchPostCodes}" render="post"></f:ajax>
</p:selectOneMenu>
<h:outputLabel for="post" value="Post" />
<p:selectOneMenu value="#{hospitalVisitBean.hos_visit.post}" id="post" tabindex="5" style="width:210px;font-size: 16px;">
<f:selectItems value="#{hospitalVisitBean.postnames}" />
<f:ajax event="change" listener="#{hospitalVisitBean.fetchPincodes()}" render="pincode" />
</p:selectOneMenu>
<h:outputLabel for="pincode" value="Pin Code" />
<p:outputLabel value="#{hospitalVisitBean.hos_visit.pincode}" id="pincode" style="width:200px;font-size: 16px;" />
<h:outputLabel for="address" value="Address" />
<p:inputTextarea value="#{hospitalVisitBean.hos_visit.address}" id="address" maxlength="450" rows="2" cols="20" autoResize="false" style="width:200px;font-size: 14px;" tabindex="6" />
<h:outputLabel for="contact" value="Telephone No" />
<p:inputText value="#{hospitalVisitBean.hos_visit.contact_details}" id="contact" tabindex="7" maxlength="8" style="width:200px;font-size: 16px;">
<pe:keyFilter mask="num" />
</p:inputText>
<h:outputLabel for="mobile" value="Mobile No" />
<p:inputMask id="mobile" value="#{hospitalVisitBean.hos_visit.mobile}" mask="9999999999" style="width:200px;font-size: 16px;" tabindex="7" />
<h:outputLabel for="email" value=" E-Mail" />
<p:inputText id="email" value="#{hospitalVisitBean.hos_visit.email}" style="width:200px;font-size: 16px;" tabindex="8" />
</p:panelGrid>
</div>
</div>
</div>
<div class="layout-portlets-box">
<div class="ContainerMod80 Responsive50">
<div class="ContainerIndent TexAlCenter">
<p:panelGrid id="hospital_visit_panel1" columns="4" layout="grid">
<f:facet name="header">
<p:outputLabel value="Add Remarks" />
</f:facet>
<h:outputLabel for="dob" value="Date Of Visit" />
<p:calendar id="dob" value="#{hospitalVisitBean.hos_visit.visit_date}" pattern="dd-MM-yyyy" navigator="true" maxdate="new Date()" readonlyInput="true" tabindex="9" />
<h:outputLabel for="reviewdate" value="Next Visit Date" />
<p:calendar id="reviewdate" value="#{hospitalVisitBean.reviewdate}" pattern="dd-MM-yyyy" mindate="new Date()" size="22" readonlyInput="true" navigator="true" tabindex="10" />
<h:outputLabel for="followup" value="Follow Up" />
<p:inputTextarea id="followup" value="#{hospitalVisitBean.hos_visit.follow_up}" rows="2" cols="20" autoResize="false" maxlength="449" style="width:200px;font-size: 14px;" tabindex="11" />
<h:outputLabel for="remarks" value="Remarks" />
<p:inputTextarea id="remarks" value="#{hospitalVisitBean.hos_visit.remarks}" rows="2" cols="20" autoResize="false" maxlength="449" style="width:200px;font-size: 14px;" tabindex="12" />
<h:outputLabel for="price" value="Price" />
<p:inputText id="price" value="#{hospitalVisitBean.hos_visit.price}" style="width:200px;font-size: 16px;" maxlength="6" tabindex="13">
<pe:keyFilter regEx="/[\d\.]/" />
</p:inputText>
<f:facet name="footer">
<center>
<!-- <p:commandButton id="addNMove" value="Add" action="#{hospitalVisitBean.addHospital}" update="hospital_visit_panel visitTable"> -->
<!-- <p:collector value="#{hospitalVisitBean.hos_visit}" addTo="#{hospitalVisitBean.list_visit}" /> -->
<!-- </p:commandButton> -->
<p:commandButton id="addNMove" value="Add" action="#{hospitalVisitBean.saveHospitals}" update="@(form)" tabindex="14">
<!-- <p:collector value="#{hospitalVisitBean.hos_visit}" addTo="#{hospitalVisitBean.list_visit}" /> -->
</p:commandButton>
<p:commandButton id="clr" value="Reset" action="#{hospitalVisitBean.clear}" update="@(form)" oncomplete="onPageComplete(xhr, status, args)" tabindex="15" />
</center>
</f:facet>
</p:panelGrid>
</div>
</div>
</div>
</h:form>
</p:panel>
<script type="text/javascript">
function onPageComplete(xhr, status, args) {
if(1) {
} else {
}
}
</script>
</ui:define>
</ui:composition>
