5 Replies Latest reply on Nov 11, 2015 2:30 AM by m.namjo Branched to a new discussion.

    RF 4.5. CR1 - popupPanel doesn't work properly (autosize and tooltip)

    bluez974

      Hello,

      On RF 4.5 CR1, the autosize attribute doesn't apply when the content of the popup is dynamically updated. Is there a javascript method that i could call on the oncomplete of my event to force the popup resizing ?

      Moreover, a tooltip inside the popup won't show on top of the popup but behind it.

       

      An issue was created about the autosize attribute when passing from RF 4.3.5 to 4.3.7

      [RF-13655] Popup Panel autosize does not work when its content is dynamically updated - JBoss Issue Tracker

       

      Here is a simple example to reproduce the issue.

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html
        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"
        xmlns:rich="http://richfaces.org/rich"
        >
      <h:head>
        <title>Test</title>
      </h:head>
      <h:body>
        <h:form id="frm">
      
        <h:commandButton id="cbPopup" 
        value="Show Popup" 
        type="button"
        onclick="#{rich:component('ppTest')}.show();return false;" />
      
      
        </h:form>
        <rich:popupPanel id="ppTest" 
        modal="true" 
        autosized="true" 
        trimOverlayedElements="false">
        <f:facet name="header">
        <h:outputText value="Autosized Popup" />
        </f:facet>
        <f:facet name="controls">
        <h:panelGroup onclick="#{rich:component('ppTest')}.hide();">
        X
        </h:panelGroup>
        </f:facet>
        <h:form id="f1">
        <h:panelGrid columns="2" style="width: 200px" >
        <h:outputLabel value="Choose your panel " for="somPanels" />
        <h:selectOneMenu id="somPanels"
        value="#{popupBean.selectedChoice}">
        <f:selectItem itemValue="" itemLabel="" />
        <f:selectItem itemValue="1" itemLabel="Panel 1" />
        <f:selectItem itemValue="2" itemLabel="Panel 2" />
        <f:selectItem itemValue="3" itemLabel="Panel 3" />
        <a4j:ajax event="change" execute="@this" render="pgCtn" />
        </h:selectOneMenu>
        </h:panelGrid>
        <rich:panel id="pgCtn">
        <h:panelGroup id="pg1" layout="block" rendered="#{popupBean.selectedChoice == 1}" style="width:600px" >
        This is my Panel 1
        <h:outputText id="ot1" value="Tooltip" >
        <rich:tooltip id="tt1" value="this My tooltip" attached="true" mode="client" />
        </h:outputText>
        </h:panelGroup>
      
        <h:panelGroup id="pg2" layout="block" rendered="#{popupBean.selectedChoice == 2}" style="width:1000px" >
        This is my Panel 2
        </h:panelGroup>
      
        <h:panelGroup id="pg3" layout="block" rendered="#{popupBean.selectedChoice == 3}" style="width:300px" >
        This is my Panel 3
        </h:panelGroup>
        </rich:panel>
        </h:form>
        </rich:popupPanel>
      </h:body>
      </html>
      

       

      package fr.alladin.common.web.bean.module.test;
      
      
      import javax.faces.bean.ManagedBean;
      
      
      @ManagedBean
      public class PopupBean {
      
        private Integer selectedChoice;
      
        public PopupBean() {
      
        }
      
        public Integer getSelectedChoice() {
        return selectedChoice;
        }
      
      
        public void setSelectedChoice(Integer selectedChoice) {
        this.selectedChoice = selectedChoice;
        }
      }
      
        • 1. Re: RF 4.5. CR1 - popupPanel doesn't work properly (autosize and tooltip)
          michpetrov

          Hi,

           

          the popup listens to ajax events but I don't think they propagate outside of a form. Put the popup inside a form and set the @domElementAttachment to parent, it'll work then.


          As far as the tooltip goes its z-index is too low. The default is 3 while for the popup it's 100. Also the above code won't work, h:inputText cannot have children elements in it, so the tooltip will be ignored. Put it outside and set @target to the id of the inputText.

          • 2. Re: Re: RF 4.5. CR1 - popupPanel doesn't work properly (autosize and tooltip)
            bluez974

            About the tooltip, I set the @zindex to 150 and it does appear above the popup. That's great.

             

            About the autosize, it does work using your method. So here after is the updated code. Thank you very much

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
            <html
              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"
              xmlns:rich="http://richfaces.org/rich"
              >
            <h:head>
              <title>Test</title>
            </h:head>
            <h:body>
            <h:form id="frm">
            
              <h:commandButton id="cbPopup"
                   value="Show Popup"
                   type="button"
                   onclick="#{rich:component('ppTest')}.show();return false;" />
            
            
            </h:form>
            <h:form id="f1">
              <rich:popupPanel id="ppTest"
                   modal="true"
                   autosized="true"
                   trimOverlayedElements="false" domElementAttachment="parent">
                   <f:facet name="header">
                        <h:outputText value="Autosized Popup" />
                   </f:facet>
                   <f:facet name="controls">
                        <h:panelGroup onclick="#{rich:component('ppTest')}.hide();">
                        X
                        </h:panelGroup>
                   </f:facet>
            
                   <h:panelGrid columns="2" style="width: 200px" >
                        <h:outputLabel value="Choose your panel " for="somPanels" />
                        <h:selectOneMenu id="somPanels"
                             value="#{popupBean.selectedChoice}">
                             <f:selectItem itemValue="" itemLabel="" />
                             <f:selectItem itemValue="1" itemLabel="Panel 1" />
                             <f:selectItem itemValue="2" itemLabel="Panel 2" />
                             <f:selectItem itemValue="3" itemLabel="Panel 3" />
                             <a4j:ajax event="change" execute="@this" render="pgCtn" />
                        </h:selectOneMenu>
                   </h:panelGrid>
                   <rich:panel id="pgCtn">
                        <h:panelGroup id="pg1" layout="block" rendered="#{popupBean.selectedChoice == 1}" style="width:600px" >
                             This is my Panel 1
                             <h:outputText id="ot1" value="Tooltip" >
                                  <rich:tooltip id="tt1" value="this My tooltip" attached="true" mode="client" zindex="150" />
                             </h:outputText>
                        </h:panelGroup>
            
                        <h:panelGroup id="pg2" layout="block" rendered="#{popupBean.selectedChoice == 2}" style="width:1000px" >
                        This is my Panel 2
                        </h:panelGroup>
            
                        <h:panelGroup id="pg3" layout="block" rendered="#{popupBean.selectedChoice == 3}" style="width:300px" >
                             This is my Panel 3
                        </h:panelGroup>
                   </rich:panel>
              </rich:popupPanel>
            </h:form>
            </h:body>
            </html>
            
            • 3. Re: RF 4.5. CR1 - popupPanel doesn't work properly (autosize and tooltip)
              scarpent

              I have this set up with popupPanel inside a form and domElementAttachment="parent", but I'm seeing a problem with a mediaOutput element on the page. The image is 400 pixels wide and I've set:

               

              autosized="true" minWidth="400" minHeight="300"

               

              The popup appears 400 wide and 300 high. Not sure of the actual height offhand, but it's more than 300 and I end up with scrollbars.

               

              Any other workaround ideas? This is in RF 4.3.7 and you were so helpful the other day with my autocomplete placeholder problem. :-)

               

              Thanks!

              • 4. Re: RF 4.5. CR1 - popupPanel doesn't work properly (autosize and tooltip)
                michpetrov

                If the panel has a header then the height of the content area is a bit smaller (20px by default). If that's not the problem I will need a reproducer.

                • 5. Re: RF 4.5. CR1 - popupPanel doesn't work properly (autosize and tooltip)
                  m.namjo

                  I have same problem and i solved it by use ajax request. My problem was : autosized="true" not work properly in first time. I used a4j:ajax to render and show my popup-panel instead render and show it by a4j:commandButton. for example:

                   

                  this is not worked properly:

                  <a4j:commandButton   action="#{handleAuctionAction.addNewTempPossession}"

                                                        execute="@this"
                                                        immediate="true"
                                                        limitRender="true"
                                                        onbegin="#{rich:component('waitingPanel')}.show();"
                                                        oncomplete="#{rich:component('addNewPossessionPopup')}.show(); #{rich:component('waitingPanel')}.hide();"
                                                        render="newPossession-outputPanel,possesionTableInPopup"/>


                  but this is worked for me:

                  <a4j:commandButton   action="#{handleAuctionAction.addNewTempPossession}">

                                                           <a4j:ajax event="click"
                                                                           execute="@this"
                                                                           immediate="true"
                                                                           limitRender="true"
                                                                           onbegin="#{rich:component('waitingPanel')}.show();"
                                                                           oncomplete="#{rich:component('addNewPossessionPopup')}.show(); #{rich:component('waitingPanel')}.hide();"
                                                                           render="newPossession-outputPanel,possesionTableInPopup"/>

                  </a4j:commandButton>


                  My popup panel is:

                  <rich:popupPanel id="addNewPossessionPopup"
                                              autosized="true"
                                              followByScroll="false"
                                              moveable="true"
                                              modal="true">      

                                        .........

                               <h:form id="form-selectPossessionInPopup">

                                         <a4j:outputPanel id="newPossession-outputPanel" ajaxRendered="false">

                                                                  ...............

                                        </a4j:outputPanel>

                              </h:form>

                   

                  </rich:popupPanel>


                  I hope this is useful for you.