primefaces北布局单元在对话调整大小时消失

Question

我正在使用primefaces 框架开发我的jsf Web 应用程序，当我在我的页面上调整dialogue 的大小时，我遇到了这种奇怪的行为north layout unit 消失，更奇怪的是，当我在任何浏览器上调整检查器的大小时，它会出现同样奇怪的行为，它就消失了，我想知道我做错了什么。

这里有一些实质性的代码：

<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.

谢谢大家。

Answer 1

在与p:layout 一起使用时将appendToBody="true" 设置为p:dialog。