primefaces north layout unit disappears on dialogue's resize - jsf

Question

i was developing my jsf web app using primefaces framework, and i come across to this strange behavior, when i resize the dialogue on my page the north layout unit disappears, what is more strange is when i resize the inspector on any browser it does same bizarre behavior , it just disappears, i wanna know what i'm doing wrong.
here a some substantial code :
<h:body>
<f:view>
<h:form id="form1">
<p:layout id="layout">
<p:layoutUnit id="north" position="north" resizable="false" header="Recherche avancé" collapsible="false" effect="drop" collapsed="false" size="140">
<p:panelGrid columns="4" styleClass="prince">
<p:panel styleClass="centeredPanelDate" header="Dates">
<p:panelGrid styleClass="centeredPanelDatePan" columns="2">
<p:selectOneMenu id="stater" value="#{dyna.dateOption}" style=" height:20px!important;
width: 140px;
font-family: klavika_boldbold;">
<f:selectItems value="#{dyna.etatdateOptions}"/>
</p:selectOneMenu>
</p:panelGrid>
<p:panelGrid columns="2" >
<p:column>
<p:outputLabel id="lab1" value= "De : " for="popupButtonCal1" />
<p:outputLabel id="lab2" value= "A : " for="popupButtonCal2"/>
</p:column>
<p:column>
<p:calendar value="#{dyna.startdate}"
id="popupButtonCal1"
validatorMessage="format de date invalide"
pattern="dd/MM/yyyy HH:mm"
mode="popup"
locale="fr"
navigator="true"
effect="show"
mindate="01/01/1988"
maxdate="31/12/2030"
showButtonPanel="true"
styleClass="calo"/>
<br></br>
<p:calendar value="#{dyna.enddate}"
id="popupButtonCal2"
validatorMessage="format de date invalide"
pattern="dd/MM/yyyy HH:mm"
mode="popup"
locale="fr"
navigator="true"
effect="show"
mindate="01/01/1988"
maxdate="31/12/2030"
showButtonPanel="true"
styleClass="calo"/>
</p:column>
</p:panelGrid>
<p:tooltip for="popupButtonCal1" value="Date de debut (selectionner une date sur la calendrier" showEffect="clip" hideEffect="clip"/>
<p:tooltip for="popupButtonCal2" value="Date de fin (selectionner une date sur la calendrier" showEffect="clip" hideEffect="clip"/>
</p:panel>
<p:panel styleClass="listsPanel" header="Listes">
<p:panelGrid styleClass="centeredPanelDatePan1" columns="3" >
<p:column>
<p:selectCheckboxMenu label="Etat" value="#{dyna.selectedstateOptions}" style=" height:18px!important;width: 100px;font-family: klavika_boldbold; ">
<f:selectItems value="#{dyna.etatExamOptions}" />
</p:selectCheckboxMenu>
</p:column>
<p:column >
<p:selectCheckboxMenu label="Payement" value="#{dyna.selectedpayOptions}" style=" height:18px!important;width: 100px;font-family: klavika_boldbold;">
<f:selectItems value="#{dyna.payExamOptions}" />
</p:selectCheckboxMenu>
</p:column>
<p:column >
<p:selectCheckboxMenu label="Salle" value="#{dyna.selectedsalleOptions}" style=" height:18px!important;width: 100px;font-family: klavika_boldbold;">
<f:selectItems value="#{dyna.salleOptions}" />
</p:selectCheckboxMenu>
</p:column>
</p:panelGrid>
</p:panel>
<p:panel styleClass="param" header="Paramètre resultat">
<p:panelGrid styleClass="param1" columns="3" >
<p:column>
<p:inputText id="txt1" value="#{dyna.number1}" />
<p:slider id ="sld" for="txt1" minValue="10" maxValue="1000" />
</p:column>
<h:column>
<p:commandButton id="searchdate" value="Rechercher" actionListener="#{dyna.search}" style="height:30px!important"/>
</h:column>
</p:panelGrid>
<p:tooltip for="txt1" value="spécifier le nombre des lignes à obtenir de la base de données (grand nombre prend plus du temps)" showEffect="clip" hideEffect="clip"/>
</p:panel>
<p:panel styleClass="userPanel" header="Données utilisateur">
<p:panelGrid styleClass="userPanelContent" columns="1">
<p:commandButton id="userbtn" value="Utilisateur" style="width: 100px!important;"/>
<p:commandButton id="colsshow" value="Colonnes" style="width: 100px!important;"/>
</p:panelGrid>
</p:panel>
<p:growl id="msg" showDetail="true"/>
</p:panelGrid>
</p:layoutUnit>
<br></br>
<p:layoutUnit id="cent"
position="center"
resizable="true"
collapsible="true"
effect="drop"
size="300"
styleClass="heighter">
....... all tags closed respectfully.
and thank you all.

Answer 1

Set appendToBody="true" on p:dialog when using with p:layout.