5 Replies Latest reply on Feb 28, 2013 5:10 PM by Manuel Fehlhammer

    Z-Order of multiple popupPanel with modal="true" depends on order in view markup

    Manuel Fehlhammer Newbie

      Migrating from Richfaces 3.x to 4.2.3/4.3.0 it seems to me that the visible z-order of multiple modal rich:popupPanel depends on the order the rich:popup tags show up in the page markup.

       

      Example:

      • popupPanel A is displayed in the browser
      • I cklick a button to open modal popupPanel B

       

       

      In case my *xhtml looks like

      {code:xml}

      <rich:popupPanel modal="true" id="PanelB" autosized="true">

      <!-- content -->

      </rich:popupPanel>

       

      <rich:popupPanel modal="true" id="PanelA" autosized="true">

      <!-- content -->

      </rich:popupPanel>

      {code:xml}

       

      then the newly opened/showed popupPanelB is hidden below popupPanelA and "inactive".

      When I switch the order in the xhtml file the newly opened popupPanelB is shown on top of popuPanel A as expected.

       

      Richfaces 3.x did not have this behaviour.

       

      I estimate it as a bug - has someone else seen this or am I missing something?

       

      Bye,

      Manuel

        • 1. Re: Z-Order of multiple popupPanel with modal="true" depends on order in view markup
          Michal Petrov Master

          Hi,

           

          just from a design standpoint - why do you need multiple popups displayed at the same time?

           

          As to your issue

           

          <rich:popupPanel id="first" header="First" modal="true">
              First panel
              <a4j:commandButton onclick="#{rich:component('second')}.show()" value="Open 2nd"/>
              <a4j:commandButton onclick="#{rich:component('first')}.hide()" value="Close 1st"/>
          </rich:popupPanel>
          
          
          <rich:popupPanel id="second" header="Second" modal="true">
              Second panel
              <a4j:commandButton onclick="#{rich:component('first')}.show()" value="Open 1st"/>
              <a4j:commandButton onclick="#{rich:component('second')}.hide()" value="Close 2nd"/>
          </rich:popupPanel>
                      
          <a4j:commandButton onclick="#{rich:component('first')}.show()" value="Open 1st"/>
          <a4j:commandButton onclick="#{rich:component('second')}.show()" value="Open 2nd"/>
          

           

          This works for me, the last opened popupPanel will be the active one and will be above the other one. How are you opening your panels?

          • 2. Re: Z-Order of multiple popupPanel with modal="true" depends on order in view markup
            Manuel Fehlhammer Newbie

            Hi Michal,

             

            > just from a design standpoint - why do you need multiple popups displayed at the same time?

             

            I have a view, where I display a table of entities.

            Selecting one of the brings up a modal popup panel which contains a detailed view to edit the entity.

            In case this entity contains subentities I want to edit a click on such a subentity brings up another popup.

             

             

            Regarding your second part:

            > This works for me, the last opened popupPanel will be the active one and will be above the other one. How are you opening your panels?

             

            I try to investigate further and then will report back here.

            However, I am opening the popups using javascript as in your example.

             

            Manuel

            • 3. Re: Z-Order of multiple popupPanel with modal="true" depends on order in view markup
              Manuel Fehlhammer Newbie

              Hi Michal,

               

              me again

              Now some input for you to reproduce the error:

               

               

              First xhtml file (richtest.xhtml) contains first popupPanel:

               

              {code:xml}

              <h:body>
                    <f:view>
                        <ui:include src="richtest2.xhtml"/>
                        <h:form>
                             <rich:popupPanel id="first" header="First" modal="true">
                                    First panel
                                  <a4j:commandButton render="second" oncomplete="#{rich:component('second')}.show()" value="Open 2nd"/>
                                  <a4j:commandButton onclick="#{rich:component('first')}.hide()" value="Close 1st"/>
                             </rich:popupPanel>

                             <a4j:commandButton render="first" oncomplete="#{rich:component('first')}.show()" value="Open 1st"/>
                             <a4j:commandButton render="second" oncomplete="#{rich:component('second')}.show()" value="Open 2nd"/>
                        </h:form>
                    </f:view>
              </h:body>
              {code}

               

               

              Second xhtml file (richtest2.xhtml) contains second popupPanel, which is included in first xhtml via <ui:include>

               

              {code:xml}

              <ui:composition>

                  <h:form>

                      <rich:popupPanel id="second" header="Second" modal="true" domElementAttachment="form">

                          Second panel

                          <a4j:commandButton render="first" oncomplete="#{rich:component('first')}.show()" value="Open 1st"/>

                          <a4j:commandButton onclick="#{rich:component('second')}.hide()" value="Close 2nd"/>

                      </rich:popupPanel>

                  </h:form>

              </ui:composition>

              {code}

               

              Here you see exactly my problem. Opening first Panel -> OK. Then from opened fisrt Panel open second panel and this is open BELOW first panel.

              I attached the two complete files.

              Maybe this has something to do with either "render" attributes, which I added as its a normal use case for me to "rerender" popups before opening or it has to do with the fact that I use different h:form for the panels?

               

              Bye Manuel

              • 4. Re: Z-Order of multiple popupPanel with modal="true" depends on order in view markup
                Michal Petrov Master

                Hi,

                or it has to do with the fact that I use different h:form for the panels?

                this is the problem, kind of.

                 

                You're using domElementAttachment="form" on the second panel, but the first panel has no attachment and by default it attaches itself to <body> which is above the <form>. So the first panel is always above the second. (And you cannot attach it to the form because it doesn't "see" it.)

                 

                If you remove the domElementAttachment attribute it will work, you can also put everything inside a single form but both those panels have to be attached to the same thing.

                 

                You can also do something like this:

                <rich:popupPanel id="second" header="Second" modal="true" 
                        onshow="#{rich:component('first')}.hide()"
                        onhide="#{rich:component('first')}.show()">
                

                it will hide the first panel when the second pops up and open it when it closes. That way you will only have one popup open at a time.

                • 5. Re: Z-Order of multiple popupPanel with modal="true" depends on order in view markup
                  Manuel Fehlhammer Newbie

                  Hi Michal,

                   

                  thank you for your explanation and time you spent!

                  I think I got it

                   

                  The reason I started to use domElementAttachment="form" for my popupPanels was the known bug/problem of JSF, when rerendering a form from the context of another form ...

                  And since I need always to rerender my popups before showing them, I placed the h:form which encapsulate the input elements of the form "outside" the panel and attached the panel to it.

                   

                  But since there are other ways to solve this "form issue" (using only one form and group with regions or explicitly specifying the id of the h:form in the rerender id list), I now know how to handle the "whole" issue.

                   

                  Bye Manuel