I have this xhtml page :
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<body>
<ui:composition template="./template_admin.xhtml">
<ui:define name="tohead">
</ui:define>
<ui:define name="content">
<p:panel header="Edition d'une commande" style="height: 490px;margin:auto;" id="panel" >
<p:messages id="msgs"/>
<h:panelGrid columns="3" style="float:left;" columnClasses="column" cellpadding="5">
<h:outputLabel for="idd" value="Id : " />
<p:inputText disabled="true" value="#{editCommandController.myCom.id}" id="idd" required="true" requiredMessage="veuillez saisir un nom" label="Nom" />
<p:message for="idd" display="icon"/>
<h:outputLabel for="dteenvoi" value="Date d'envoi : " />
<p:inputText disabled="true" id="dteenvoi" value="#{editCommandController.myCom.dateEnvoi}" required="true" requiredMessage="veuillez saisir un prénom" label="Prénom" />
<p:message for="dteenvoi" display="icon"/>
<h:outputLabel for="division" value="Date de livraison recommandée : " />
<p:inputText disabled="true" id="division" value="#{editCommandController.myCom.dateLivraisonRecommande}" />
<p:message for="division" display="icon"/>
<h:outputLabel for="poste" value="Nombre de page : " />
<p:inputText id="poste" disabled="true" value="#{editCommandController.myCom.nbrePage}" />
<p:message for="poste" display="icon"/>
<h:outputLabel for="email" value="Nombre d'exemplaire : " />
<p:inputText id="email" disabled="true" value="#{editCommandController.myCom.nbreExemplaire}" />
<p:message for="email" display="icon"/>
<h:outputLabel for="autres" value="Type d'impression : " />
<p:inputText id="autres" disabled="true" value="#{editCommandController.myCom.typeImpression}" />
<p:message for="autres" display="icon"/>
<h:outputLabel for="identifiant" value="Observation : " />
<p:inputTextarea id="identifiant" disabled="true" value="#{editCommandController.myCom.observation}" required="true" validator="#{addUserController.validateIdentifiant}" requiredMessage="veuillez saisir un identifiant" label="Identifiant" />
<p:message for="identifiant" display="icon"/>
<h:outputLabel for="dec" value="Decision : " />
<p:selectOneMenu id="dec" value="#{editCommandController.myCom.decision}" >
<f:selectItems value="#{editCommandController.decisions}" />
<p:ajax update="etat calen gridContainer :myform:alors" listener="#{editCommandController.decisionlistener()}" event="change" />
</p:selectOneMenu>
<p:message for="dec" display="icon"/>
<h:outputLabel for="etat" value="Etat : " />
<p:selectOneMenu id="etat" value="#{editCommandController.myCom.etat}" disabled="#{editCommandController.myCom.decision eq 'rejettée' or editCommandController.myCom.decision eq 'en attente'}" >
<f:selectItems value="#{editCommandController.etats}" />
</p:selectOneMenu>
<p:message for="etat" display="icon"/>
<h:outputLabel for="calen" value="Date de Livraison réelle: *" />
<p:calendar label="Date de Livraison reelle" id="calen" showOn="button" disabled="#{editCommandController.myCom.decision eq 'rejettée' or editCommandController.myCom.decision eq 'en attente'}" effect="slide" value="#{editCommandController.myCom.dateLivraisonReelle}" pattern="MM/dd/yyyy HH:mm" >
</p:calendar>
<p:message for="calen" id="msgSurname4" display="icon"/>
</h:panelGrid>
<p:outputPanel id="gridContainer" style="margin-left: 150px;" layoyut="block" >
<h:panelGrid id="alors" rendered="#{editCommandController.myCom.decision ne 'rejettée' and editCommandController.myCom.decision ne 'en attente'}" >
<h:outputText value="ci dessous la liste des papiers ayant un stock (>=) à la quantité demandé" style="font-size: 0.7em;margin-bottom: -3px;" />
<p:dataTable id="cars" style="width: 80px;margin-top: -6px;" var="car" value="#{editCommandController.pdm}" paginator="true" rows="10"
selection="#{editCommandController.selectedPapier}" selectionMode="single" >
<p:ajax event="rowSelect" update=":myform:jesuis :myform:jesuis1 :myform:jesuis2" />
<f:facet name="header">
RadioButton Based Selection
</f:facet>
<p:column headerText="libelle" >
#{car.libelle}
</p:column>
<p:column headerText="format" >
#{car.format}
</p:column>
<p:column headerText="stock" >
#{car.stock}
</p:column>
</p:dataTable>
<h:outputText id="jesuis" value="vous avez choisi le papier : #{editCommandController.selectedPapier.libelle}" />
<h:outputText id="jesuis1" value="la quantité nécéssaire : #{editCommandController.myCom.nbreExemplaire*editCommandController.myCom.nbrePage}" />
<h:outputText id="jesuis2" value="la quantité réstante en Stock : #{editCommandController.selectedPapier.stock - (editCommandController.myCom.nbreExemplaire*editCommandController.myCom.nbrePage)}" />
<span id="relief" ></span>
<h:panelGrid columns="2" cellpadding="5" style="margin-top: 15px;">
<h:outputLabel value="Reliure :" for="city" />
<p:selectOneMenu id="Reliure" required="true" value="#{editCommandController.choixReliure}">
<f:selectItem itemLabel="choisir reliure" itemValue="" />
<f:selectItems value="#{editCommandController.libelleReliures}" />
<p:ajax listener="#{editCommandController.vclistener()}" />
</p:selectOneMenu>
</h:panelGrid>
</h:panelGrid>
</p:outputPanel>
<h:panelGrid columns="2" style="clear:left;" >
<p:commandButton value="Editer" ajax="false" action="#{editCommandController.updateCommand()}" update="panel" ></p:commandButton>
<p:commandButton value="Annuler" immediate="true" action="commandesUser" ajax="false" ></p:commandButton>
</h:panelGrid>
</p:panel>
</ui:define>
</ui:composition>
</body>
</html>
when I run my application and I open this page :
I have it like this
but when I click on edit button and if there are a erro in validation :
I have the form like this :
I don’t know the cause of this displacement components
do you have any idea how to resolve this problem, thanks
You gave it a fixed height.
Remove it to make it as high as its contents.