7 Replies Latest reply on May 15, 2009 12:11 PM by kid electric

    Hbox nested inside Vbox not behaving

    kid electric Level 1

      Normally, I seem to have no problem nesting an HBox container inside of a VBox in MXML... when I do this, the VBox vertically lists items and when it comes to the HBox, any children contained in that box show up across the screen Horizontally.


      This is the effect I want in my new app, but I am loading the content into the HBox dynamically (from XML via httpService) and then using addChild to add the HBox to the VBox, like so:



      for each (node in xmlList){
      // some code here which I have omitted gets the image source and text from the XML node
      // Add the image/text VBox to the Services HBoxhbServices.addChild(vbService);


      When I do this, the text blocks that I have placed into hbServices show up, so I know the hbServices container was placed inside the
      VBox (vbContent).... BUT, each text block ends up centered, each below the previous one...  so, instead of going horizontally ACROSS (as one would expect if they are inside an HBox), they are only going up and down.


      Any ideas?  Is this because the HBox is being created and populated dynamically instead of in MXML at initialization?

        • 1. Re: Hbox nested inside Vbox not behaving
          Gregory Lafrance Level 6

          Looks to me like you are adding them to the VBox:




          You probably want to create a new instance of HBox for each for loop iteration.


          Also, you may need to make sure in AS you set the percentWidth and percentHeight to 100 (not 100%).

          1 person found this helpful
          • 2. Re: Hbox nested inside Vbox not behaving
            run,ryan! Level 3

            which is your vbox?

            is vbService your vbox? then you are adding all the text to one box.

            (set box borderstyle=solid will help you see the layer better)

            • 3. Re: Hbox nested inside Vbox not behaving
              kid electric Level 1

              Doh! Sorry, yes it does look like I am adding to VBox, not HBox... somehow this editor stuck one of my lines at the end of the comment... it should be:



              // Add the VBox to the Services HBox


              I went and double-checked my code to make sure it looks like the above, and it does...


              so what I am doing is making a series of VBoxes; each one contains an Image, then a Text (thus, an picture over top of a text block)


              I want to then insert each of these VBoxes (there are currently 4) inside an HBox, so that I have a horizontal row of 4 VBoxes lined up.


              But instead, each VBox seems to be stacking one on top of the other, as if they are contained inside another VBox instead of an HBox

              • 4. Re: Hbox nested inside Vbox not behaving
                Gregory Lafrance Level 6

                I'd check your code to make sure you're using an HBox.

                • 5. Re: Hbox nested inside Vbox not behaving
                  kid electric Level 1

                  I declare it in the beginning of script (outside of the function) as:


                  private var hbServices:HBox = new HBox();



                  Kind of baffled... I'm going to add some borders to my boxes to see if that helps me determine what's going on, but I haven't really seen this before (however, I normally do the layout in MXML instead of dynamically switching it through XML load.  Functionally, this site I'm making is very simple, but stylistically, it is becoming a nightmare despite how minimalist it is.  The reason I am using XML loads instead of MXML is so that I can create an admin/content-management system so the client can go in and make basic changes without having Flex or needing to know any special coding skills)

                  • 6. Re: Hbox nested inside Vbox not behaving
                    Gregory Lafrance Level 6

                    I usually set the backgroundColor of my containers to red, blue, green, etc. if I am having a problem like this, just so I have a more clear picture of what's going on.


                    One other thing to verify is that you are adding to the right containers, because in the past I've accidentally added to the Application container, which defaults to vertical layout.


                    If my posts helped at all, please mark as such.

                    • 7. Re: Hbox nested inside Vbox not behaving
                      kid electric Level 1

                      Upon looking back at your first suggestion, the part where you said to create and HBox instance for each loop was the most helpful.


                      I didn't actually need a new HBox for each iteration, but in my HBox I needed to insert 4 VBoxes.  The problem was that I had one VBox initialized OUTSIDE of the loop, then in the loop I was just assigning a new ID and adding child content to the VBox object and inserting it in... for some reason I thought that would create multiple instances of the same object type, but I wasn't actually thinking about the fact that, each time I set the VBox id, I was simply taking the same VBox I originally had, changing its ID, and adding more content to it.


                      So my problem wasn't actually with the layout -- it was the fact that, instead of having 4 Vboxes, I really only had one that I kept adding children to... so I ended up having an HBox with one VBox inside, which contained all of the content that kept being tacked on to the previous content (which is why it was centered in the middle and really long)


                      So I fixed this by creating an actual VBox object on each iteration through the loop, as you had implied in your first response