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

StackOverflow https://stackoverflow.com/questions/1529706

  •  20-09-2019
  •  | 
  •  

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>

Was it helpful?

Solution

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

OTHER TIPS

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

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top