To avoid polluting the component's tag with the resizable related attributes we could have them defined on a facet or client behaviour tag, declared within the component's tag. For example:

<ace:panel header="Header ..." closable="true" toggleable="true" collapsed="#{panelBean.collapsed}">
                <ace:resizable animate="true" ghost="false" containment="true"/>
                .....
                panel content
                .....
</ace:panel>

Implementation wise the resizable feature can be implemented server side as a ClientBehaviour just like the ace:ajax behaviour while the client side will need to invoke the jQuery resizable functionality in the component initialization.

This issue is a follow up for ICE-10583.

Modified jQuery's resizeable code to take into accout the margins as well when calculating the constraining box for the resized element. Add 'box-sizing' CSS rule to the ace:panel's content element to fill the inner space (without padding and margin) of the parent element. Modified resizable renderer to use the parent element not the root element of the parent component as the element constraining the containment.

Add 'box-sizing' CSS rule to the tabset's and accordion's content element so that the resizable component will fill the inner space (without padding and margin) of the parent element.

Wow, you are reading my mind. I was about to suggest that all our container component should be verified with an included resizable component.

There is ace:panelStack remaining to be tested.

The ace:panelStack with resizable causes a JS error when the test page is loaded.

QA test application: http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/resizable
Test page: /resizableContainerComp.jsf

FF49:
TypeError: b is null
http://localhost:8080/resizable/javax.faces.resource/bridge.js.jsf?ln=ice.core&v=4_2_0_170105
Line 41

MsEdge38:
SCRIPT5007: Unable to get property 'enctype' of undefined or null reference
bridge.js.jsf (41,127)

Chrome:
Uncaught TypeError: Cannot read property 'enctype' of null
at Object.f.captureSubmit (bridge.js.jsf?ln=ice.core&v=4_2_0_170105:41)
at resizableContainerComp.jsf:32

Modified test page to test the inclusion of resizable component in the ACE container components.

Add panel stack CSS rules to fix containment. Made StackPaneRenderer render its 'style' attribute.

Introduced system event listener that decorates the resized component with a child component responsible for rendering (within the component) the client setup code for the resizable feature. This fix gets rid of the try/catch from the previous fix since the setup code is rendered only when the component to be resized is also rendered.

Verified ICEfaces4 trunk r 49979 on IE11, IE8, MsEdge, Chrome55, FF49. The JS errors from above comment can no longer be reproduced.
As per Ken's request, added also test pages with multiple instances of the same container component with resizable:

• /containment/resizablePanels.jsf
• /containment/resizableAccordions.jsf
• /containment/resizableTabSets.jsf
• /containment/resizablePanelStacks.jsf

Updated tabset's CSS rules to have the tab's content container occupy its entire allowed area and consequentely the enclosed resizable component.

Any container component can be resized as in attached image, by decreasing the size beyond the contained outputText limit. Is this an issue?

No, it is not. The resized component can choose to hide or add scroll bars for the overflowed content (by using just CSS).

Re-tested ace:resizable QA Ajax test with IF4 trunk r 50000, and all ajax tests fail in all browsers. This is not an issue with r. 49811.
QA app: http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/resizable
Test: /resizableAjax.jsf

Add back the the behaviour encoding for the resizable component.

I reviewed the ajax test for ace:resizable and it is working as expected. I didn't miss any commit. Commit #50011 fixed the ajax test.

Added back the ResizableRenderer.decode method.

ICEfaces4 trunk r50153 /IE11, MsEdge, Chrome55, FF49: the ajax tests have been fixed, however the ace:resizable with MandatoryResourceConfig still fails.
All resizable graphicImage tests are missing the handle and the graphic images cannot be resized. This is an issue on all browsers.
This was not an issue with ICEfaces 4.2.BETA libraries.

I don't see that. The resize handle is there and when clicking 'Submit' button the width and height of the image is shown. I believe that is the expected behavior?! Are you sure that you are running with the latest code?

I was testing with ICEfaces4 trunk r50153, and indeed, the ace:resizable with MandatoryResourceConfig passes.
However, all the other tests for GraphicImage don't render the handle. As example:
/resizableOnly.jsf
/graphicImage/resizableDynAttribute.jsf
On other tests, the handle becomes visible after a form submit, as example:

• after adding a row on /graphicImage/resizableTableTop.jsf
• after switching tabs on /graphicImage/resizableSparkleTabset.jsf
  This is only an issue for the tests with the graphicImage and not for the resizable ACE container components.

Modified Resizable.Setup to render the setup script as child of the target component only if it already has children.

Hopefully the issue is resolved now.