Details
-
Improvement
-
Status: Closed
-
Major
-
Resolution: Won't Fix
-
Adobe Flex SDK 4.0 (Release)
-
None
-
None
-
Affected OS(s): All OS Platforms
Language Found: English
Description
Found in 4.0.0.14159.
Steps to reproduce:
1. Compile and run attached MXML file.
2. Drag the Slder to resize the TitleWindow container's title bar area.
Actual Results:
Text is vertically aligned, but close button isnt.
Expected Results:
Button should be vertically aligned, not pinned to top-right corner.
Workaround (if any):
(a) Reskin s:TitleWindow and change the top="7" constraint to verticalAlign="0" (see line 232 in spark/skins/spark/TitleWindowSkin.mxml:
<!--- @copy spark.components.TitleWindow#closeButton -->
<s:Button id="closeButton" skinClass="spark.skins.spark.TitleWindowCloseButtonSkin"
width="15" height="15" right="7" top="7" />
(b) Set the verticalAlign property/constraint in the TitleWindow container's creationComplete event handler (no need to reskin, which is nicer – but requires you to set this on each individual TitleWindow with non-standard title bar height):
<s:HSlider id="sl" minimum="30" maximum="120" change="tw.titleDisplay.minHeight = sl.value;" />
<s:TitleWindow id="tw"
title="Spark TitleWindow title"
height="200"
x="20" y="20"
creationComplete="tw.closeButton.verticalCenter = 0;">
<s:layout>
<s:VerticalLayout paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20" />
</s:layout>
<s:Label text="Foo bar" />
</s:TitleWindow>
(c) Betterer still, set the verticalAlign style/constraint globally using clever CSS. Setting this style seems to override the top constraint in the skin. So double-bonus of not needing to reskin, and being able to do this globally with a few lines of CSS:
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
s|TitleWindow #closeButton
{ verticalCenter: 0; }</fx:Style>
<s:HSlider id="sl" minimum="30" maximum="120" change="tw.titleDisplay.minHeight = sl.value;" />
<s:TitleWindow id="tw"
title="Spark TitleWindow title"
height="200"
x="20" y="20">
<s:layout>
<s:VerticalLayout paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20" />
</s:layout>
<s:Label text="Foo bar" />
</s:TitleWindow>