Uploaded image for project: 'RichFaces'
  1. RichFaces
  2. RF-13616

PopupPanel autosize with togglePanel doesn't resize

    Details

    • Type: Bug
    • Status: Closed (View Workflow)
    • Priority: Major
    • Resolution: Done
    • Affects Version/s: 4.2.3.Final, 4.3.6
    • Fix Version/s: 4.3.7
    • Component/s: component
    • Labels:
    • Steps to Reproduce:
      Hide

      1. Without moving the PopupPanel directly switch to Panel Item 2.

      2. The PopupPanel is autosized as expected, correctly adjusting to the size difference between its previous and its current content. Now switch back to Panel Item 1.

      3. Move the PopupPanel around and then switch back to Panel Item 2.

      4. Notice that the PopupPanel isn't properly autosized anymore but is now stuck to the smaller width of Panel Item 1.

      Switching to Panel Item 2 will autosize the PopupPanel properly if and only if it hasn't been moved yet. Looking into the PopupPanel source code we found that while initially moving the PopupPanel, the width of the currently active Panel Item is hard-set on said divs in the PopupPanel RichFaces.ui.PopupPanel.prototype.doResizeOrMove method which prevents all further autosizing on move.

      A possible workaround:- which overrides the original doResizeOrMove method on the RichFaces.ui.PopupPanel prototype and simply undoes the modifications of the previously undefined CSS widths properties on the relevant divs if the PopupPanel autosized attribute is enabled--can be activated by uncommenting the following code in /main/webapp/resources/js/patch-popup-panel.js:

        /*
        (function() {
          var richfacesUiPopupPanelDoResizeOrMove = RichFaces.ui.PopupPanel.prototype.doResizeOrMove;
          RichFaces.ui.PopupPanel.prototype.doResizeOrMove = function(diff) {
            var ret = richfacesUiPopupPanelDoResizeOrMove.call(this, diff);
            if (this.options.autosized) {
              this.cdiv.css("width", "");
              this.contentDiv.css("width", "");
              this.scrollerDiv.css("width", "");
              this.shadowDiv.css("width", "");
            }
            return ret;
          };
        }());
        */
      

      Show
      1. Without moving the PopupPanel directly switch to Panel Item 2. 2. The PopupPanel is autosized as expected, correctly adjusting to the size difference between its previous and its current content. Now switch back to Panel Item 1. 3. Move the PopupPanel around and then switch back to Panel Item 2. 4. Notice that the PopupPanel isn't properly autosized anymore but is now stuck to the smaller width of Panel Item 1. Switching to Panel Item 2 will autosize the PopupPanel properly if and only if it hasn't been moved yet. Looking into the PopupPanel source code we found that while initially moving the PopupPanel, the width of the currently active Panel Item is hard-set on said divs in the PopupPanel RichFaces.ui.PopupPanel.prototype.doResizeOrMove method which prevents all further autosizing on move. A possible workaround:- which overrides the original doResizeOrMove method on the RichFaces.ui.PopupPanel prototype and simply undoes the modifications of the previously undefined CSS widths properties on the relevant divs if the PopupPanel autosized attribute is enabled--can be activated by uncommenting the following code in /main/webapp/resources/js/patch-popup-panel.js: /* (function() { var richfacesUiPopupPanelDoResizeOrMove = RichFaces.ui.PopupPanel.prototype.doResizeOrMove; RichFaces.ui.PopupPanel.prototype.doResizeOrMove = function(diff) { var ret = richfacesUiPopupPanelDoResizeOrMove.call(this, diff); if (this.options.autosized) { this.cdiv.css("width", ""); this.contentDiv.css("width", ""); this.scrollerDiv.css("width", ""); this.shadowDiv.css("width", ""); } return ret; }; }()); */

      Description

      PopupPanel doesn't autosize correctly after move. Moving a PopupPanel with 'autosized' attribute enabled causes the width properties of its inner container div, content div, srcoller div, and shadow div to be hard-set such that a subsequent content change doesn't trigger the auto-resize of the PopupPanel any longer. The PopupPanel height is apparently unaffected.

      Attached is a testcase to demonstrate the problem, see the attached zip file containing a minimal JSF application which reproduces the undesired behavior.

      	<ui:define name="body"
      		onload="#{rich:component('popup')}.hide(); return false;">
      		<h:outputStylesheet>
      	        .rf-tgp-itm {
      		        border: 1px solid #{richSkin.panelBorderColor};
      		        padding: 5px;
      	        }
      	 
      	        .tabDiv {
      		        margin: 0 5px 5px 0;
      		        border: 1px solid #{richSkin.panelBorderColor};
      		        background-color: #{richSkin.headerBackgroundColor};
      		        cursor: pointer;
      		        padding: 0 5px;
      		        float: left;
      	        }
      	    </h:outputStylesheet>
      		<h:form>
      			<h:commandButton value="Open the popup">
      				<rich:componentControl target="popup" operation="show" />
      			</h:commandButton>
      		</h:form>
      		<rich:popupPanel id="popup" modal="false" autosized="true"
      			resizeable="false">
      			<f:facet name="header">
      				<h:outputText value="Demo PopupPanel" />
      			</f:facet>
      			<f:facet name="controls">
      				<h:outputLink value="#"
      					onclick="#{rich:component('popup')}.hide(); return false;">X</h:outputLink>
      			</f:facet>
      			<h:form>
      				<rich:togglePanel id="panel1" activeItem="item1" render="tabs"
      					itemChangeListener="#{panelMenuBean.processItemChange}">
      					<rich:togglePanelItem name="item1">
      						<h3>Panel Item 1</h3>
      						<p>Steps to reproduce:</p>
      						<p>1. Without moving the PopupPanel directly switch to Panel
      							Item 2.</p>
      						<p>3. Now move the PopupPanel around and then switch back to
      							Panel Item 2.</p>
      					</rich:togglePanelItem>
      					<rich:togglePanelItem name="item2" style="width:777px">
      						<h3>Panel Item 2</h3>
      						<p>2. The PopupPanel is autosized, correctly adjusting to the
      							size difference between its previous and its current content. Now
      							switch back to Panel Item 1.</p>
      						<p>4. As you notice, the PopupPanel isn't properly autosized
      							anymore after first moving it but is now stuck to the smaller
      							width of Panel Item 1, its previous content.</p>
      					</rich:togglePanelItem>
      				</rich:togglePanel>
      				<a4j:outputPanel id="tabs" layout="block">
      					<a4j:outputPanel layout="block" styleClass="tabDiv">
      						<rich:toggleControl event="click" targetPanel="panel1"
      							targetItem="item1" />
      						<h:outputText value="Toggle Panel Item 1"
      							style="#{rich:findComponent('panel1').activeItem == 'item1' ? 'font-weight:bold' : 'font-weight:normal'}" />
      					</a4j:outputPanel>
      					<a4j:outputPanel layout="block" styleClass="tabDiv">
      						<rich:toggleControl event="click" targetPanel="panel1"
      							targetItem="item2" />
      						<h:outputText value="Toggle Panel Item 2"
      							style="#{rich:findComponent('panel1').activeItem == 'item2' ? 'font-weight:bold' : 'font-weight:normal'}" />
      					</a4j:outputPanel>
      				</a4j:outputPanel>
      			</h:form>
      		</rich:popupPanel>
       
      		<h:outputScript name="js/patch-popup-panel.js" />
      

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Assignee:
                  bleathem Brian Leathem
                  Reporter:
                  avijra abhishek vijra
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  4 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:

                    Time Tracking

                    Estimated:
                    Original Estimate - 4 hours
                    4h
                    Remaining:
                    Remaining Estimate - 4 hours
                    4h
                    Logged:
                    Time Spent - Not Specified
                    Not Specified