3 Replies Latest reply on Dec 16, 2009 7:31 AM by martin.berg

    Text alignment in a hbox

    martin.berg Level 1



      I tried to middle align text inside a hbox but the text always stick out and does not fit


      var hb:HBox = new HBox();
            hb.setStyle("verticalAlign", "middle");
            hb.height = 12;
            var textField:Label = new Label();
            textField.styleName = "treeMapLinkLabel";
            textField.text = labelProp.getValue(hereNode);


      the text is 10 pixels heigh and the hbox i set to 12 yet the text hides below and has like 5 pixels space at the top

        • 1. Re: Text alignment in a hbox
          Sophie_cordier Level 1

          Hello Martin.


          If you don't set the values for top and bottom padding, the label uses the default ones: 4 pixels for top padding and 3 pixels for bottom padding. Try not to set height for the HBox (in this case it will be set using its children height) and the label will fit perfectly.


          hb.height = 12;




          1 person found this helpful
          • 2. Re: Text alignment in a hbox
            Gregory Lafrance Level 6

            hb.setStyle("paddingLeft", 0);

            hb.setStyle("paddingRight", 0);

            hb.setStyle("paddingTop", 0);

            hb.setStyle("paddingBottom", 0);


            If this post answers your question or helps, please mark it as such.

            Greg Lafrance

            Flex Development and Support Services

            1 person found this helpful
            • 3. Re: Text alignment in a hbox
              martin.berg Level 1

              Well the point is to limit the height of the hbox to 12 pixels the text is 10 pix so i can't leave it out as the hbox auto scales to about 16 px


              I did get it working in a different place but can't reproduce it here weird


              I tried to use the same component structure and properties but it does not work I have to play around with it more




              Setting a negative


                    textField.setStyle("paddingTop", -4);


              seems to do the trick even if its  an ugly hack