[richfaces-issues] [JBoss JIRA] (RF-13616) PopupPanel autosize with togglePanel doesn't resize
Brian Leathem (JIRA)
issues at jboss.org
Thu May 1 13:43:56 EDT 2014
[ https://issues.jboss.org/browse/RF-13616?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]
Brian Leathem updated RF-13616:
-------------------------------
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.
{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}
was:
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.
> 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.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}
--
This message was sent by Atlassian JIRA
(v6.2.3#6260)
More information about the richfaces-issues
mailing list