PopupPanel autosize with togglePanel doesn't resize --------------------------------------------------- Key: RF-13616 URL: https://issues.jboss.org/browse/RF-13616 Project: RichFaces Issue Type: Bug Security Level: Public(Everyone can see) Components: component Affects Versions: 4.2.3.Final, 4.3.6 Reporter: abhishek vijra Labels: gss Fix For: 4.3.7 Attachments: popupPanel-maven.zip, popupPanel.zip Original Estimate: 4 hours Remaining Estimate: 4 hours 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. {code} <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" /> {code}