rich:popupPanel causes a line break

[vace117]

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.

[vace117]

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}

[a.zhemoytuk]

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

[jprats]

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.

[a.zhemoytuk]

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

[jprats]

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.

[kwutzke]

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

I'll link to this thread.

Karsten