6 Replies Latest reply on Jun 25, 2012 7:35 AM by Karsten Wutzke

    rich:popupPanel causes a line break

    Val Blant Newbie

      I think there is a small bug in <rich:popupPanel />.

       

      The problem is that the component causes a line break wherever it is placed in the page. This is b/c the hidden top-level DIV uses 'visibility: hidden' rather than 'display: none;' to hide the panel. So, although the DIV is not visible, the page is laid out as if it was there.

       

      I know that the panel itself can be placed anywhere in the page, so normally it is easy to avoid this problem, but I'm using it inside a composite component, so the popup is very close to the link that activates it, which causes layout issues.

       

      Is there a workaround?

       

      Thanks.

        • 1. Re: rich:popupPanel causes a line break
          Val Blant Newbie

          I was able to fix it for Firefox, but Chrome still doesn't work. I don't know why...

           

           

          {code}

          <!--

                     This code moves the popup DIV to reside right under the form, so only the

                     link stays here. Since the DIV is floated into position anyways, it doesn't matter

                     where it is physically located, but this way it can't mess with our layout.

                    

                     This fix only works for Firefox. Chrome still doesn't work.

          -->

          <script type="text/javascript">

                    jQuery(document).ready(function() {

                              var internal_div = jQuery(#{rich:element('popupPanel')});

                              var cur_parent = internal_div.parent();

                              var form = internal_div.closest("form");

           

           

                              if ( cur_parent != form ) {

                                        internal_div.appendTo(form);

           

           

                                        // Force a redraw

                                        //

                                        cur_parent.parent().hide();

                                        cur_parent.parent().show();

                              }

                    });

          </script>

           

          {code}

          • 2. Re: rich:popupPanel causes a line break
            Andrey Zhemoytuk Newbie

            The issue is still reproducible as of 4.2.2.Final.

            Also interesting that style is 'fixed' after show and hide of panel (it seems because jQuery show/hide functions are used). So incorrect style 'visibility: hidden' comes from server side only.

             

            jira item added: https://issues.jboss.org/browse/RF-12337

            • 3. Re: rich:popupPanel causes a line break
              jprats Newbie

              Another solution is to use a CSS selector instead, for example:

               

              <style type="text/css">

                #myFormId\:myPopupId[style="visibility: hidden;"] { display:none; }

              </style>

               

              This works on FF, Chrome and IE, and requires no javascript.

              • 4. Re: rich:popupPanel causes a line break
                Andrey Zhemoytuk Newbie

                Thanks Juan, that works but requires such line for each usage of popupPanel.

                Also it does not work when popup is shown - style is changed to display:block, so layout is impacted again.

                 

                Here is a fix, which does not require change on every page with popupPanel.

                It just wraps code generated by popupPanel by non-displayed div, so it does not matter what happens inside of it. And popupPanel functionality works OK with that change.

                It can generate extra divs in case of partial update of popupPanel alone, but still nothing is broken.

                This can be used as a workaround till RF release a real fix:

                 

                public class PopupPanelRendererWorkaround extends PopupPanelRenderer

                    implements Workaround

                {

                  @Override

                  public void encodeEnd(FacesContext facesContext, UIComponent component) throws IOException

                  {

                    ResponseWriter responseWriter = facesContext.getResponseWriter();

                    responseWriter.startElement("div", component);

                    responseWriter.writeAttribute("style", "display: none;", null);

                 

                    super.encodeEnd(facesContext, component);

                 

                    responseWriter.endElement("div");

                  }

                }

                 

                and in faces-config:

                <renderer>

                  <component-family>org.richfaces.PopupPanel</component-family>

                  <renderer-type>org.richfaces.PopupPanelRenderer</renderer-type>

                  <renderer-class>com.example.PopupPanelRendererWorkaround</renderer-class>

                </renderer>

                 

                UPDATE:

                Workaround breaks popupPanel in case of domElementAttachment attribute has value parent: domElementAttachment="parent" (popupPanel does not show up in such case).

                 

                Message was edited by: Andrey Zhemoytuk

                • 5. Re: rich:popupPanel causes a line break
                  jprats Newbie

                  Andrey, you're right, the line is broken again when the modal is shown.

                   

                  To be honest I've never had such a problem while using popupPanels because I always place them down in the page, where no interaction is caused with other elements.

                   

                  +1 for your workaround.

                  • 6. Re: rich:popupPanel causes a line break
                    Karsten Wutzke Expert

                    I was asking for this, too here: https://community.jboss.org/message/738082

                     

                    I'll link to this thread.

                     

                    Karsten