2 Replies Latest reply on Aug 12, 2010 3:26 PM by SiHoop

    Aligning objects accurately

    SiHoop Level 1

      One of my biggest problems in mxml involves aligning text. In the code below, I want to align the bottoms of the text fields so the two text fields are sitting at the same vertical height.

      Please tell me how to do this.

       

      Thank you.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"    creationComplete="application1_creationCompleteHandler(event)" >
          <mx:Script>
              <![CDATA[
                  import mx.events.FlexEvent;
                  protected function application1_creationCompleteHandler(event:FlexEvent):void{
                      title.setStyle("fontSize", 30)
                      subtitle.setStyle("fontSize", 14)
                  }

       

              ]]>
          </mx:Script>
                  <mx:HBox verticalAlign="bottom">
                      <mx:Text    id="title" text="Title"   />               
                      <mx:Text   id="subtitle" text="subTitle"   />
                  </mx:HBox>
      </mx:Application>

        • 1. Re: Aligning objects accurately
          Fuzzy Barsik Level 4

           

          I'm not sure I'm an expert in typography, but, having created almost 1.5 fonts (or even 1.6), I learnt that all of them possess their own metrics (like ascenders, descenders etc.)... Word processors align letters with font zero line. But in Flex we deal with text fields, which are created to accommodate letters with all their apexes and tails (which have different length in different font sizes)...

          Being even less skilled in Flex, I'm not sure that there is appropriate automatic solution...

          But you may align it manually by adding paddings (at least it works...)

           

          <?xml version="1.0" encoding="utf-8"?>

          <mx:Application

           

           

          xmlns:mx="http://www.adobe.com/2006/mxml"

          layout="

          absolute" minWidth="400"

          creationComplete="application1_creationCompleteHandler(event)"

          >

           

           

          <mx:Script>

          <![CDATA[

          import mx.events.FlexEvent;

          protected function application1_creationCompleteHandler(event:FlexEvent):void{

          title.setStyle("fontSize", 30)

          subtitle.setStyle("fontSize", 14)

          }

           

          ]]>

           

           

          </mx:Script>

           

           

          <mx:HBox verticalAlign="bottom">

           

           

          <mx:Text id="title" text="QqWwYyUuPpAaGgHhJjKk" fontSize="30"/>

           

           

          <mx:Text id="subtitle" text="QqWwYyUuPpAaGgHhJjKk" fontSize="14" paddingBottom="2"/>

           

           

          </mx:HBox>

          </mx:Application>

           

          P.S. I don't know why, but application creation complete handler didn't want working, so I had to add font size definitions...

          • 2. Re: Aligning objects accurately
            SiHoop Level 1

            Thank you!