3 Replies Latest reply on Oct 29, 2010 6:12 AM by BhaskerChari

    VBox verticalAlign doesn't work when child has height in %

    Ibarim Level 1

      Hi,

       

      I got code like this:

       

      <mx:VBox id="vb1" verticalAlign="middle">
      <mx:CheckBox .../>
      <mx:VBox id="vb2" height="50%">
      ...
      </mx:VBox>
      </mx:VBox>
      

       

      Effect is that verticalAlignment doesn't work for the 1st VBox (it seems that it's set to default value - 'top'). It works only when I remove 'height' property from the 2nd VBox (or when I change "50%" to "50" or any other number).

        • 1. Re: VBox verticalAlign doesn't work when child has height in %
          BhaskerChari Level 4

          Hi Ibarim,

           


          verticalAlignment will not work for VBox when you have two or more children and which are direct children. When you have only one direct children for VBox then it will work. Normally we use verticalAlignment="middle" for HBox and not VBox. Since VBox lays out its children vertically this property won't work when you have more than 1 children.

           

          You can try this

          <mx:VBox id="vb1" width="400" height="100%" verticalAlign="middle">
          <mx:VBox id="vb2"
          width="200" height="50%">

          </mx:VBox>
          </mx:VBox>

           

           

          <mx:VBox id="vb1" width="400" height="100%" verticalAlign="middle">
               <mx:CheckBox id="chk" label="My CheckBox"/>
          </mx:VBox>

           

           

          The above two combinations work correctly as you have only one immediate children....But if you see the below case...

           

          <mx:VBox id="vb1" width="400" height="100%" verticalAlign="middle">
               <mx:VBox id="vb2"
          width="200" height="50%" backgroundColor="yellow" verticalAlign="middle">
                    <mx:CheckBox label="Check Box"/>
                   <mx:VBox id="vb3" width="200" height="50%" backgroundColor="blue">
                    </mx:VBox>
               </mx:VBox>
          </mx:VBox>

           

          Now in the above case you can see that VBox vb2 is vertically aligned middle in the VBox vb1 as vb2 is the only one direct child of VBox vb1. Whereas now in the VBox vb2 Check Box and VBox vb3 are not vertically aligned in the VBOx vb2 as because now VBox vb2 contains two children.

           

          Hope this is clear and make you understand the problem.

           

          Thanks,

          Bhasker

          • 2. Re: VBox verticalAlign doesn't work when child has height in %
            Ibarim Level 1

            Thanks BhaskerChari, Your advice about 1 children will be very helpfull to me.

             

            There is one exception though: vbox verticalAlign='middle' works ok every time when there is only one child. That's true. But it works also when there is more children.

            At least in my flex it doesn't matter how many children the vbox has. It can have more than 1 child and the verticalAlign='middle' works ok. It doesn't work only when there is more then 1 child and one of the children has height defined in %. In your last example try to change vb3 height from '50%' to '50' (or any other number) and You will see that children of vb2 are aligned in the middle.

            • 3. Re: VBox verticalAlign doesn't work when child has height in %
              BhaskerChari Level 4

              @Ibarim,

               

              Yes you are right the explanation I gave only applies to the child's of VBox having heights in percentages.

               

              Thanks,

              Bhasker