14 Replies Latest reply on May 3, 2013 6:01 PM by moe

    RF4.1: bug with popupPanel not centralized




      My environment: NetBeans7.1 + GlassFish 3.1.1 + CDI/Weld + JSF2 + RichFaces4.1.


      I made a sample code to ilustrated the problem with popupPanel, that at first time appears centralized. From the second time to ever, RichFaces puts the popupPanel in a crazy position at more and less right and botton corner of the navigator. I tested in Firefox10, Chrome16 and IE9.





      <h:form id="formCad">

          <a4j:commandButton id="buttonPanel" value="Open"




          <rich:popupPanel header="A Panel" id="openPanel" width="600" height="300" domElementAttachment="parent">

              <rich:panel style="width:100%;height:100%" id="openGrid">

                  <h:outputText value="Test Panel" />

                  <a4j:commandButton value="Close Panel" onclick="#{rich:component('openPanel')}.hide(); return false;" />









      public class TesteController implements Serializable {

        public String openPanel() {

          return null;


        • 1. Re: RF4.1: bug with popupPanel not centralized

          Hi, Edilmar


          Try set domElementAttachment="form"


          It's work for me.


          Regards, Vitaliy

          • 2. Re: RF4.1: bug with popupPanel not centralized



            For a simple popupPanel with a button to just hide it, that works, like sample code that I put above.

            However, I have the following situation: my panel has some fields + a4j:commandButton to process something and return to main window.



            <rich:popupPanel header="Receber Conta" id="receberPanel" width="800" height="300" domElementAttachment="form">

              ... // some fields

               <a4j:commandButton value="OK" action="#{baixaContasReceberFil.receber}"

                 render="receberMessages,tituloTotais,tabledup,tabletransacao" execute="receberPanel"

                 oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('receberPanel')}.hide();}" />



            If I use "form", the a4j:commandButton becomes processing the AJAX and doesn't run the oncomplete method to hide the form.

            If I use "parent", all works fine. Is this a bug in popupPanel + a4j:commandButton combination?

            • 3. Re: RF4.1: bug with popupPanel not centralized

              I tried to change the code from a4j:commandButton to h:commandButton + a4j:jsFunction, like this:



              <h:commandButton value="OK" onclick="jsInicializarTicados();">

                <a4j:jsFunction name="jsInicializarTicados" actionListener="#{baixaContasPagarFil.inicializarTicados}"

                                render="inicializarTicadosMessages,tituloTotais,tabledup,inicializarTicadosPanel" execute="inicializarTicadosPanel"

                                oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('inicializarTicadosPanel')}.hide();}"/>



              This way was worse, because it arises Null Pointer very fast, I think because facesContext is null at this moment.

              • 4. Re: RF4.1: bug with popupPanel not centralized

                I encountered this problem as well.


                I discovered that there is a bug report currently opened on this issue.




                This is my current work around for the problem.


                I included a jquery function which will center an element to the screen.


                jQuery.fn.center = function () {

                this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
                this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
                return this;

                Taken from http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen



                I then put the following javascript into my buttons oncomplete attribute RichFaces.$('myForm:myPopup').getContentElement().center()


                Using your button I would then make it


                <a4j:commandButton id="buttonPanel" value="Open"



                                                            oncomplete="#{rich:component('openPanel')}.show(); RichFaces.$('formCad:openPanel').getContentElement().center()"/>


                I tried putting the call into the popPanels onbeforeshow event attribute but I failed to get it to work there.  Hope this works for you.  If anyone finds a cleaner or better way please post it.


                Message was edited by: James C Trying to get some code formatting but I am failing.

                • 5. Re: RF4.1: bug with popupPanel not centralized

                  Thanks James, I've updated the jira issue with your workaround.  We'll see if we can get this addressed in 4.3, or perhaps in a 4.2.2 release.

                  • 6. Re: RF4.1: bug with popupPanel not centralized

                    Hi All

                         I have found the solution for this problem , even i have faced same issue with project ,then after googling a lot i have found out the solution in rich faces




                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                    <ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"

                        xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j"



                        <rich:popupPanel id="pp" resizeable="true" header="Popup panel shown using rich:componentControl and rich:hashParam">

                            <f:facet name="controls">

                                <h:outputLink value="#" onclick="#{rich:component('pp')}.hide(); return false;">




                            <h:outputText value="Settings applied by hashParam tag:" />

                            <h:panelGrid columns="2">

                                <h:outputText value="Width:" />

                                <h:outputText value="500" />

                                <h:outputText value="Height:" />

                                <h:outputText value="300" />

                                <h:outputText value="minWidth:" />

                                <h:outputText value="300" />

                                <h:outputText value="minHeight:" />

                                <h:outputText value="150" />


                            <p>The panel is getting centered by using:</p>


                            <p>&lt;a4j:param noEscape="true" name="left" value="(window.width/2)-250"/&gt;</p>


                            <p>&lt;a4j:param noEscape="true" name="top" value="(window.height/2)-150"/&gt;</p>





                                <p>Notice that the show() api method requires an event parameter to be first according to signature. So we

                                    passed it before the hashParam.</p>




                        <h:commandButton value="Show popup">

                            <rich:componentControl target="pp" operation="show">

                                <a4j:param noEscape="true" value="event" />


                                    <f:param name="width" value="500" />

                                    <f:param name="height" value="300" />

                                    <f:param name="minWidth" value="300" />

                                    <f:param name="minHeight" value="150" />

                                    <a4j:param noEscape="true" name="left" value="(jQuery(window).width()/2)-250" />

                                    <a4j:param noEscape="true" name="top" value="(jQuery(window).height()/2)-150" />








                    we need to pass the height and width parameters as hashparams to the popup screen . Please see the code which i have posted ,then surley you will understand.

                    • 7. Re: RF4.1: bug with popupPanel not centralized



                      I was in a big project and just today I got to test.

                      The problem continues the same after change to the code from Showcase.

                      The "secret" is that Showcase doesn't use this:


                      but my code need to work other things.

                      And I tested today in Richfaces 4.1.1 and 4.2.2, the bug continues.

                      Waiting for 4.3...

                      • 8. Re: RF4.1: bug with popupPanel not centralized

                        Have you tried it on the simple example that you gave in the original post?


                        I have tried using the javascript and Mahendher's hashParam fix and its mostly working with the code you provided at the start.  I say mostly working because both center the popup on the screen, however, there is a small display problem with the bottom edge of the front panel and the drop shadow.  Seeing the exact same thing with both fixes.


                        Perhaps we can narrow down the problem a bit depending on whether or not it is working on the simplified example.

                        • 9. Re: RF4.1: bug with popupPanel not centralized



                          I changed my code to use domElementAttachment="form" and all worked fine in 4.2.2 in the simple test!

                          However, I have a popupPanel that does this in a button:


                                      <a4j:commandButton value="OK" action="#{baixaContasPagarFil.inicializarTicados}"
                                                         render="inicializarTicadosMessages,tituloTotais,tabledup,inicializarTicadosPanel" execute="inicializarTicadosPanel"
                                                         oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('inicializarTicadosPanel')}.hide();}" />


                          The render and execute commands work fine.

                          But oncomplete doesn't hide the popupPanel.

                          This is how the browser becomes:




                          I think there is a problem with "popupPanel using form" x "a4j:status".


                          My status is here: <a4j:status onstart="#{rich:component('splash')}.show()" onstop="#{rich:component('splash')}.hide()" />


                          If I use "parent", there is no problem with status, just the problem that doesn't center the popupPanel after first interaction.

                          • 10. Re: RF4.1: bug with popupPanel not centralized

                            I also tried the workaround from James C. using jQuery.fn.center + the change in a4j:commandButton to do "show+center" into "oncomplete".

                            Again the problem with a4j:status, but now the popupPanel isn't show. The problem in the post above was in close of popupPanel process.

                            Here the image to show this:


                            • 11. Re: RF4.1: bug with popupPanel not centralized

                              I came out a clean work around on this issue by reading the RF documentation


                              Step 1: UI - XHTML Page


                              <a4j:commandLink render="winPopId" execute="@this" actionListener="#{mBean.showWinData}"

                                                       oncomplete="openPopWindow(#{rich:component('winPopId')});"><span>Open Window</span></a4j:commandLink>




                              Step 2: Javascript




                              Section: 9.4.7. JavaScript API

                              getTop() - Return the top co-ordinate for the position of the pop-up panel.

                              getLeft() - Return the left co-ordinate for the position of the pop-up panel.

                              moveTo(top,left) - Move the pop-up panel to the co-ordinates specified with the top and left parameters.



                              var winTopV = 0;

                              var winLeftV = 0;


                              function openPopWindow(popWx) {



                                  setWinCoor(popWx.getTop(), popWx.getLeft());

                                  popWx.moveTo(winTopV, winLeftV);



                              function setWinCoor(topV,leftV) {

                                 if (winTopV == 0) {

                                    winTopV = topV;



                                 if (winLeftV == 0) {

                                    winLeftV = leftV;



                              • 12. Re: RF4.1: bug with popupPanel not centralized

                                It didn't work too.

                                This is really a bug with popupPanel (domElementAttachment="parent").

                                • 13. Re: RF4.1: bug with popupPanel not centralized

                                  I'm suprise it did'nt work for you as I'm also using domElementAttachment="parent" property setting.


                                  The moveTo(top,left) api function is not dependent I suppose on domElementAttachment property as it work for me perfectly.

                                  The concept on my workaround is to save the original coordinate position the first time you open the window which correctly center the object.

                                  The bug here is when you close and open it again that's where it alters and misplace the center coordinate.


                                  Make an alert on getTop() and getLeft() to see the coordinate changes. Hope this helps.

                                  1 of 1 people found this helpful
                                  • 14. Re: RF4.1: bug with popupPanel not centralized

                                    Thank you Rulix, you make my day!