Details
-
Bug
-
Status: Closed
-
Critical
-
Resolution: Fixed
-
Adobe Flex SDK Previous
-
None
-
Affected OS(s): All OS Platforms
Affected OS(s): All OS Platforms
Browser: Firefox 2.x
Language Found: English
Description
In the attached example both FxContainers appear to clip their
FxButton child, despite the fact that the second one explicitly sets
clipContent="false".
Pressing the buttons prints the vital signs of each FxContainer, its
skin child, and the skin's contentGroup child. The report for the
second container shows that although the contentGroup's clipContent
property is set as expected, automatic clipping is actually triggered
by the difference in sizes between the skin and the contentGroup:
fxcClipFalse:
actual size 100 x 100
skin actual size 100 x 100
skin content size 200 x 100
skin clipContent true
skin scrollRect (x=0, y=0, w=100, h=100)
contentGroup actual size 200 x 100
contentGroup content size 200 x 21
contentGroup clipContent false
contentGroup scrollRect null
The skin's content width is greater than its actual width, so the skin
sets its scrollRect which clips to the skin's actual size.
What we'd expected is that the contenGroup's actual size would always
exactly match the skin, which would exactly match the FxContainer.
The reason this isn't happening is that the contentGroup's size is
implicitly specified in FxContainerSkin like this:
<Group id="contentGroup" left="0" right="0" top="0" bottom="0">
The skin's BasicLayout honors the contentGroup's minimum size and in
our example, the minimum width is defined by the FxButton, for which
we've specified an explicit width. So the skin's layout sets the
contentGroup's actual width to 200.
If the FxContainer's skin and contentGroup descendants are intended to
be "invisible" vis the layout of the FxContainers MXML DOM children
(the FxButtons in our example), then the the skin and contentGroup's
actual sizes must always exactly match the FxContainer's. This is
can be accomplished by providing an explicit minimuum size for the
FxContainer skin's contentGroup:
<Group id="contentGroup" minWidth="0" minHeight="0" left="0" right="0" top="0" bottom="0">