comment Centrer un bouton dans une hbox flex?

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

  •  20-09-2019
  •  | 
  •  

Question

I ai un VBox à l'intérieur duquel j'ai 4 hbox. Le second niveau HBox est d'abord caché. Lorsque je clique sur l'étiquette, « Afficher plus d'options », le deuxième niveau HBox est affiché. Maintenant, j'ai l'espace occupé par le bouton « second niveau Hbox » vide et les « recherche » appaers ci-dessous l'espace.

Ma première question est, est-il un moyen de placer le bouton de recherche de telle sorte que, l'espace est pas là et après l'étiquette «Afficher plus d'options de est cliqué, l'affiche « Deuxième niveau HBox »?

Et la deuxième question est, puis-je placer le bouton de recherche au centre de la page. Est-il une méthode pour centrer le contenu d'un HBox d'un VBox?

Ceci est mon 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>

Était-ce utile?

La solution

Pour centrer choses à l'intérieur d'un HBox, ajoutez l'attribut suivant à la zone en question, 

horizontalAlign="center" width="100%"

En ce qui concerne l'espace vide créé par des boîtes invisibles (ou HBox VBox), je ne sais pas s'il y a un moyen, mais je me trouve ajouter cet attribut à la boîte invisible, 

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

L'espoir qui aide

Autres conseils

Pour masquer vraiment le composant, définissez l'attribut includeInLayout à tout ce qui est visible. (Ou réglez vous-même lorsque vous changez de visible) Par défaut, il est vrai, de sorte que si le composant est visible ou non, l'espace est mesura. 

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

Vous pouvez utiliser flex États pour ajouter le deuxième niveau hbox comme et quand il est nécessaire.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top