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>

Lublin

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

Borchers

This horizontal align, only aligns the contents inside the HBox to a center position. But it is still in the corner of the web page. How to bring that to the center? – Lublin

I dont really understand what you mean, but read my edit.. and see if that fixes it... – Borchers

Nice! But the horizontalAlign attribute does not work if the width is not specified! – Galyak

@Keshav, Sorry, my knowledge ends there and I don't do flex nowadays :) – Borchers

Answer 2

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">

Salon

Answer 3

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

Posthumous