how to center align a button in a hbox in flex ?

Question

I have a VBox inside which I have 4 HBoxes. The second level HBox is initially hidden. When I click the label, 'Show more Options', the second level HBox is displayed. Now I have the space occupied by the 'second level HBOx' empty and the 'search' button appaers below the space.

My first question is, Is there a way to position the Search Button in such a way that, the space is not there and after the 'Show more Options' label is clicked, the 'Second Level HBox' appears?

And the second question is, Can I position the Search Button at the center of the page. Is there any method to center the contents of a HBox of a VBox?

This is my code:

<mx:Form x="47" y="219" width="80%" >


<mx:VBox id="searchBox" >
 <mx:HBox id="searchTitle"  width="100%" height="20" backgroundColor="#2680D5">
  <mx:Label text="Search Criteria" paddingRight="250" width="654.6212" height="18.030302"/>
   <mx:Label text="show more options" id="moreOption"  click="showOption(event)" width="127.045456" height="21.969696"/>

 </mx:HBox>

 <mx:HBox id="firstLevel" paddingBottom="10" paddingTop="15" >

  <mx:Label text="Task Name" paddingLeft="20"/>
  <mx:TextInput id="searchTaskName" paddingLeft="10" /> 

  <mx:Label text="Item Code"  paddingLeft="30"/>
  <mx:TextInput id="searchItemCode" paddingLeft="10"/>

     <mx:Label text="Task Type" paddingLeft="30"/>
     <mx:ComboBox id="searchTaskType" paddingLeft="10"/> 
 </mx:HBox>

 <mx:HBox id="secondLevel" visible="false" paddingTop="5">

  <mx:Label text="Task ID" paddingLeft="20" />
  <mx:TextInput id="searchTaskId" paddingLeft="10"/>



  <mx:Label text="Project Won" paddingLeft="30"/>
  <mx:ComboBox id="searchWon" paddingLeft="10"/>
 </mx:HBox>


 <mx:HBox>
  <mx:Button label="Search"  />
 </mx:HBox> 


</mx:VBox>

Answer 1

To center stuff inside a HBox, add the following attribute to the box in question,

horizontalAlign="center" width="100%"

As for the empty space created by invisible boxes (HBox or VBox), I dont know if there is any way, but I find myself adding this attribute to the invisible box,

height="{secondLevel.visible ? 200 : 0}"

Hope that helps

Answer 2

You can use flex states to add the second level hbox as and when it is required.

Answer 3

To truly hide the component, set the includeInLayout attribute to whatever visible is. (Or set it yourself when you change visible) By default, it's true, so whether the component is visible or not, the space is measured out.

<mx:HBox id="secondLevel" visible="false" includeInLayout="{secondLevel.visible}" paddingTop="5">