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

    Text alignment in a hbox

    martin.berg

      Hi,

       

      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);
            hb.addChild(textField);
            addChild(hb);

       

      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

          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;

           

           

          Sophie

          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
            www.ChikaraDev.com

            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